Making my slider pause between slides

[TDWebDev]

Hi there,

 

I've created a slider using ScrollTrigger and i was wanting to know how i'd go about forcing the slides to have a little delay once they reach the center, Maybe like 1 or 2 seconds or so, Hopefully this makes sense, You should see what i mean from the demo, Currently it just slides constantly from the second it pins to the second its over

 

Thanks

See the Pen MWxrxZy by Thomas-Deer-the-animator (@Thomas-Deer-the-animator) on CodePen

[Rodrigo]

Hi @TDWebDev and welcome to the GSAP Forums!

 

Maybe this thread can provide some valuable information on this particular subject:

Also if you want to do other stuff with your horizontal slides/cards you can use the Container Animation feature:

https://gsap.com/blog/3-8/#containeranimation

 

Hopefully this helps.

Happy Tweening!

[TDWebDev]

Thanks @Rodrigo This is pretty much exactly what i needed as i had plans to animate text/images when reaching the particular slide. Thanks for this!

 

[TDWebDev]

Sorry after playing around and trying to merge the demo and my code together and get the background colours working i have kinda come up with this. But i can't seem to work out how to get the background to work correctly on reverse and how i would ensure the image sits for a little while before scrolling off the screen and the next slide coming into view, 

An updated codepen link can be found here 

See the Pen OJqQjzJ by Thomas-Deer-the-animator (@Thomas-Deer-the-animator) on CodePen

 

Appreciate any help with this.

[Rodrigo]

Hi,

 

Just use the position parameter to increase the amount of time between both animations on the image:

.to(card(".scroll-through"), {
  yPercent: 0,
  opacity: 1,
  ease: "power2.out",
  duration: 4
})
.to(card(".scroll-through"), {
  yPercent: 200,
  opacity: 0,
  ease: "power2.out",
  duration: 1
}, "+=1")

Finally is better to use a call() method instead of the onStart callback to change the background color.

 

Here is a fork of your demo:

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

 

Finally @Carl has a great video showing how to create a background change based on scrolling:

 

Hopefully this helps.

Happy Tweening!