Jump to content
Search Community

Macbook Opening animation using scrolltrigger

kocoug test
Moderator Tag

Recommended Posts

23 minutes ago, mvaneijgen said:

Sorry we can't really debug live websites, there is just no way to modify the code. You can just link to the images from your live site on codepen, eg <img src="https://incoding.co.kr/portfolio/img/bg.jpg">. Keep in mind that a minimal demo is just coloured divs, please don't include your whole project. 

I uploaded on the codepen! 

I am trying to make the Macbook looks opening when I scroll down and macbook-cover-b.svg will be the screen image and zooming in to my main index page. (also closing when I scroll up. )

Link to comment
Share on other sites

I'm sorry, but can you make it so that we can view the current version on live site on codepen with all the bugs you have, that way we can see you're thought process and thus better help you. 

 

Right now you can't scroll and nothing is working. 

Link to comment
Share on other sites

19 minutes ago, mvaneijgen said:

I'm sorry, but can you make it so that we can view the current version on live site on codepen with all the bugs you have, that way we can see you're thought process and thus better help you. 

 

Right now you can't scroll and nothing is working. 

I think I have to start over the javascript I'm confused which one to start with. 

Link to comment
Share on other sites

Ok, I've debugged your pen some more and finally got something working. I see you're overwriting the default scroll behaviour of the browser, personally I'm not a fan of this and think this should never be done, unless you 100% know what you're doing. But I've been building sites for 10 years now and I wouldn't touch it with a 10 feet pole.

 

I think your main issue is to many ScrollTriggers, I would just create one timeline with all your animations. Keep in mind the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

Also GSAP gives you access to all transform properties directly. 

// The following 

transform: "translate3d(0, 0, 0) rotateX(0deg)",
  
// can be written as this
  
x: 0,
y: 0,
z: 0,
rotateX: 0,

// This way you can just modify the properties you want to target

 

Here is just the animation on a timeline with no ScrollTrigger 

 

See the Pen PoXZMJe?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

And here is the same animation with one ScrollTrigger. I've removed position: fixed; from your CSS and set pin: true, in ScrollTrigger, now ScrollTrigger will control the pinning of elements. 

 

See the Pen KKbVObP?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

I would really advies taking a look at the following guides. ScrollTrigger is great, but the bases is GSAP (the animation), so getting the animation correct is the first step in creating a great ScrollTrigger animation.

 

https://greensock.com/get-started/
https://greensock.com/get-started-2

 

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...