Jump to content
Search Community

Problems when scrolling with background images

mrpsk test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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.

 

 

 

  • Like 5
Link to comment
Share on other sites

I've reworked some of this for you @mrpsk

 

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

 

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.

  • Like 5
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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

  • Like 3
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...