fade sections in and out and split image using scrolltrigger

[dagda1]

This is my first time using greensock and it is fair to say I have failed at what I want to achieve.

 

I am very baffled by the second string argument to both `start` and `end`.

 

e.g. `top top`.  I get what the first top means but not the second.

 

In the codesandbox, I want the sections to apply and remove opacity as they scroll in and out and I want the 2 divs to split apart when I scroll into the second section but it is not working.

 

Here is a codesandbox

[mvaneijgen]

Hi @dagda1 welcome to the forum! 

 

It is hard to wrap your head around it at first, but it is fairly simple, your codesanbox doesn't load for me, but I'll try my best to explain how the strings work. 

 

You can split them op into two sections, the first word has everything to do with your trigger element, eg trigger: "#myElm" and the second one has to to with the viewport (the browser window). I find it best to always use markers: true, in my ScrollTrigger object, because this will visualise the markers and makes it even easier to understand. 

 

so, "top top" means, when the top of my trigger element ("#myElm") hits the top of the browsers viewport do something until end: "bottom top", translates to: when the bottom of "#myElm" hits the top of the browser window and this will animate something (if scrub is true) for a distance of the height of "#myElm".

 

 

here is a simpel example. You can see that the start and end makers are on top and on the bottom of the element and the viewport makers are on top of each other at the top of the viewport

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

 

This animation is really fast, because the element isn't that big, so what we can do is add some pixel distance to the end marker, so we do bottom+=3000px this will set the end to the bottom of the element + 3000px. If you don't care about the height of the element you could set it to top+=3000px or just set it as 3000px, ScrollTrigger is smart and just tries to convert what you type there to what it needs. Hope it helps and happy tweening! 

 

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

[dagda1]

@mvaneijgen thank you for the explanation, that is helpful.

Here is a codepen 

See the Pen vYVxyMj by dagda1 (@dagda1) on CodePen

.  Not sure why the codesandbox is not working.  I think I had to enable codesandbox for 3rd party cookies.

[mvaneijgen]

There are a few issues with your code.

 

ScrollTrigger uses the normal browser scroll to do all It's calculations, so if you disable scroll on the body and put it on another object you have to know 100% what you're doing and then set a custom scroller to have ScrollTrigger use that as the scroller (check the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger) When starting out I would strongly discourage hacking the normal scroll behaviour and just let the browser handle all it scroll (see your CSS for what I've removed) 

 

When you define ScrollTrigger in a timeline all you do is create an object called scrollTrigger: {} and put all your settings in there directly. you had set it up like this scrollTrigger: {ScrollTrigger.create({...})} which is not correct and creates two ScrollTriggers at once. 

 

You almost never need a .fromTo() animation. Your elements are either already at their start position or their end position, so at .to() or .from() is all you need. 

 

I would advise you to remove ScrollTrigger at first! 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. 

 

I've removed all other ScrollTriggers and just have the one where the text moves to the left and right. Let's start there and slowly build up from that. What do you want this text to do? 

 

See the Pen yLRMgba?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

[dagda1]

Thank you for taking the time to do this.

 

I am trying to create what is happening in this website where the image splits in half (I've used divs in the codepen but images in reality).  

The image splits in half and is then pinned at the sides.

Also, the sections fade in and out based on scroll position. 

[Rodrigo]

Hi,

 

I think the best approach here is to forget about ScrollTrigger for now and focus just on getting the image split animation first, then tie ScrollTrigger to it. ScrollTrigger just updates the progress of a specific animation based on the scroll position, nothing more.

 

I'd encourage you to create a working animation first and then use ScrollTrigger in it. If you have any issue with creating the animation, just post back and we'll help you as much as we can with that.

 

Happy Tweening!

[dagda1]

Adding the animation is not that difficult

 

See the Pen OJBpjog by dagda1 (@dagda1) on CodePen

 

Adding the scroll trigger and then pinning it when you scroll down is the difficult bit for me.

[dagda1]

I don't quite understand why I can get the divs to split but why do they not come back together when I scroll back up.

 

This is my first day using gsp so apologies if I am doing something stupid,  apologies.

 

See the Pen VwEpMbb by dagda1 (@dagda1) on CodePen

[dagda1]

I was not using scrub.

This is not too far off what I want.

 

See the Pen NWOpaom by dagda1 (@dagda1) on CodePen

 

Can anyone let me know how I can pin the images to this side when scrolling down like in this example

[GreenSock]

You mean like this?: 

See the Pen XWxMZgJ by GreenSock (@GreenSock) on CodePen

[dagda1]

@GreenSock that looks great.

 

I've looked at a lot of codepens today and I had no idea that start could take a function or that "max" was a value for end.

Can you point me to any docs which have a full list of all permissible values?

[GreenSock]

Yep, it's all listed in the docs. 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Enjoy!