ScrollTrigger container f rom right to left above text

[gikall]

Hello guys,

 

I am newbie to GSAP and a little confused. 

In the above codepen I want to achieve something like the example of United Sodas scrolling section.

But I have only 4 elements to the right.. and final result I want at the middle of the right section i.e. at the end of the third photo to scrolling down and not to lose the boxes on the left.

 

Thanks in advance!

See the Pen zYadqVX by gionic (@gionic) on CodePen

[mvaneijgen]

Hi @gikall welcome to the forum!

 

There are a few things I personally like to do when working with GSAP (and ScrollTrigger). Frist off I never animate the element that is also my trigger, in this example it's fine, but this will cause problems someday, so I advise you to never do it.  Next to that I like to start with a timeline, with this you get so much more control and it will become easier to add tweens to something. In most cases the .from() tween is easier to work with, because if you layout your elements like you want them to be when the animation is done you don't have to do any fancy calculations to get them to the point you want. 

 

So lets say you want your animation to be done showing 2.5 cans. I like my CSS to be at the point I want them to stop, so this is what my CSS would look like. 

 

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

 

The best thing to do 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. So here I just focus on the animation, I've disabled ScrollTrigger, this also shows you the power of a timeline, because it will be trivial this way to have the text also animate in.

 

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

 

And when I'm happy with all that I turn ScrollTrigger on and take it from there. Another thing, I would not have classes and ids with the same name, this can get really confusing really fast. You have two different elements called scroller-scene, but one is a class and the other an id. Hope it helps and happy tweening! 

 

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

[gikall]

Hello @mvaneijgen, thank you for the reply.

 

All your advices are correct, and I will try to apply them. But I don't want to move .text-group . Only the .can-group  from right and at the middle of them I want to continue scrolling to the bottom sections!

[mvaneijgen]

Sure, just remove my tween on the .text-group from the code. It just was there to show you how easy this would be if you ever change you mind in the future and why I advise to always with with timelines instead of working with gsap.to() tweens. 

[gikall]

I went it a little further,  but now I broke the scroll end. 😕

 

Check it here

[mvaneijgen]

Have you seen my comment about the position parameter  in the code? This is a really powerful feature and I encourage you to take a look at the docs. 

 

Right now you have two tweens, that start at the same time, animate the same element, one moves your cans .form() and to other .to() I would remove one of the tweens, your last tween is now winning and I don't know what you want this one to do. 

 

And again, the best thing to do 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.

[gikall]

Alright, now I'm so confused. By the way thank you @mvaneijgen

[mvaneijgen]

What are you confused about? You want don't want the text to tween, fine removed that form the code. Then you're done right? 

 

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

[gikall]

6 minutes ago, mvaneijgen said:

What are you confused about? You want don't want the text to tween, fine removed that form the code. Then you're done right? 

 

 

 

Yes but in your example the #scroller-wrapper  continues to go down and down and down. I want after the third "can" to continue to the bottom section, and not to show the #scroller-wrapper all over the time.

 

Here is the problem end: () => "+=" + wrapper.offsetWidth

[mvaneijgen]

If that is your problem, why not remove it? The default of end is end: "bottom top" and this usually just works.

 

See the Pen RwJZpje by mvaneijgen (@mvaneijgen) on CodePen

 

I'm not 100% certain what your issue is at the moment, could you maybe explain your issue as follows:

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 

[gikall]

Alright, you have right with about tweens, I removed the "to" animation. 

 

I combined gsap with CSS, and the result is that I want.  I add end: () => "+=" + 700

And I believe I'm ok now!