Macbook Opening animation using scrolltrigger

[kocoug]

I am trying to make a intro animation using Macbook to be opened when I scroll down.

like https://incoding.co.kr/portfolio/index.html this page.

I cloned the initial shape of the Macbook closed one but, I do not get it how to make it as opening while scrolling down and closing while scrolling up. 

 

 

See the Pen ZEVQdXM by kocoug (@kocoug) on CodePen

[mvaneijgen]

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. 

[kocoug]

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. )

[mvaneijgen]

There is no Javascript in the pen. Have you forgot to include it? 

[kocoug]

14 minutes ago, mvaneijgen said:

There is no Javascript in the pen. Have you forgot to include it? 

 

I did it like this but I think I am doing it wrong way :C

[mvaneijgen]

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. 

[kocoug]

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. 

[mvaneijgen]

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