[OnReverse callback don't trigger]

@elegantseagulls @Carl

I really appreciate your help! I solved it by following Carl advice (totally my mistake when I thought about an onReverse function) and I used onReverseComplete in each container, so now the text changes when the last animation is done and my code is finally complete

I updated the code on CodePen, if you want to check how I solved.

Thanks guys!

[OnReverse callback don't trigger]

Hi everyone!

I'm almost at the goal of my code, basically it works as a timeline guided by the ScrollTrigger plugin. To finish it, I just need to make reverse functions for each animation.

But when I try to call the OnReverse method, it simply don't work.
I already read the documentation (specially the part in ToggleActions and timeline callbacks) and I used a lot of OnStart() methods. But I can't figure out why the OnReverse method is not getting called when I make a EnterBack action. I tried to call the onReverse in the animation and in the timeline, and doesn't work in both. I attempted to use onEnterback() too.

Is that something that I'm doing bad? Can someone give a hint?

Thanks in advance

See the Pen RwjbByP by mrpsk (@mrpsk) on CodePen

[Problems when scrolling with background images]

On 1/21/2022 at 12:59 PM, Cassie said:

I've reworked some of this for you @mrpsk

 

 

 

 

With scrollTriggered things like this it's pretty important to think about the markup and the styling. Consider which things will be pinned in place, which will scroll naturally and what needs to be animated.

If you're animating between images in a slideshow type fashion - it's often best to keep them in the same container, position then absolutely and then just change their position with GSAP.

In the demo I've tweaked for you, the text and numbers just scroll naturally but the images are being animated.

You could also create one timeline for all the image animations and tie it to the entire progress of the scroll instead of triggering at each container.

Hi @Cassie
Thats a really nice strategy, I will keep in mind while working with gsap.

I will use this rework and add some new features to achieve what I want, but your reply helped a LOT.

Thanks for your help
 

[Problems when scrolling with background images]

On 1/21/2022 at 12:41 PM, akapowl said:

Hello @mrpsk

 

There is quite a lot going on in your demo, and I think you might need to re-work how you do some of those things.

 

You have quite some ScrollTriggers there with the same trigger element and same start and end, so for one you could go ahead and merge them together in one scrolltrigger-controlled timeline whereever that is the case. As you are also having pins on some of those for the same element multiple times, I think it would definitely be better to merge those.

 

One more thing you'll want to keep in mind, is to use immediateRender: false whenever you are going to tween on the same property of one and the same element later on with another ScrollTrigger controlled tween. Not doing so is one of the most common ScrollTrigger mistakes.

 

 

 

 

I don't have the time to go through everything in your demo and re-work it for you, but this thread here shows a way how to get a very similar effect to the website you linked as reference. As your setup looks to be a bit different, you will probably have to adjust quite a lot though.

 

 

 

Hi @akapowl
I see, that is a lot of beginners mistakes that i'm making.
I'm reworking on my code right now, thanks for the input!

[Problems when scrolling with background images]

Hi everyone!

I'm trying do to a timeline (not the GSAP feature, but a real event timeline) and I'm basically keeping one element fixed (the "20" from  the year "2010") and by scrolling I want to change the side text (in the left), the background image and the current year by using scrub. 

As you can see in my CodePen, the first slide transition is nice, but I guess it's because the first two sections contains the same background image. So when i change from section 2 to section 3 it goes very weird and don't transition nice. I notice a curious thing too: when I set the "pin:true", the fixed element is dropped to background, so I can't use this prop. All I want is the transition to go smoother like in the first one.

Does anyone have any solution for this? I appreciate all the input that you can give!

PS: I'm doing something like this (https://15years.melonfashion.ru/en/) you can see a similar timeline in the 4th section of this website.

Thanks in advance

See the Pen ZEXdRpy by mrpsk (@mrpsk) on CodePen

[ScrollTrigger with vertical scroll]

15 hours ago, Cassie said:

Hey there!

 

This is a pretty complex demo. It's solving a lot of problems that you don't need solved for your use case.

 

Maybe it would help to start over with a simpler starting point? Something like this?
 

 

Hi Cassie!

Thank you so much for your input, indeed it was pretty complex for my use case. But now I studied about the codepen you made and the concepts are more clear to me, now I can make some adjustments and learn more about this awesome lib.

Have a nice day!

[ScrollTrigger with vertical scroll]

Hi there!

I took this codepen from the Examples: CodePen Home Infinite Scrolling Cards with GSAP and ScrollTrigger (continuous snap) (

See the Pen LYRwgPo?editors=0010 by GreenSock (@GreenSock) on CodePen

) and I'm trying to adapt it to show some images to make an "About Us" section with all team members.

So right now I wrote my progress at this codepen -> 
I'm having some trouble in those topics below:
- In the start, I don't want to show the previous members (since I disabled the infinite scrolling mode), so I'm trying to make it start with the left side of the screen in blank (so the text can be properly displayed too).
- I want to end the scrolltrigger when the list of members end. Right now I'm having a loop issue that continues after the last member of my list.
- I want to change the spacement between the cards to put them side by side (and don't fade away), any tips?

Someone can help me to find out where I can made some changes in my JS file?

Thanks in advance!

See the Pen yLzRroG by mrpsk (@mrpsk) on CodePen