Jump to content
GreenSock

moonunit7

ScrollTrigger scrub "Carousel" effect

Go to solution Solved by Rodrigo,

Recommended Posts

Hi there :) I new around here and also to GSAP. I have to develop a carousel like effect of items sliding in and a description fading in/out on each item (but only if the item is centre stage). 

 

What I'm trying to achieve (on scroll/scrub) is to pin the container and slide the items in and out.

The tricky part is that it starts on "item-2" (doesn't show description first time)  then slide "item-2" to the right and "item-1" in.

 

It feels like I'm waaaay off base.  I'm using Timelines - but it feels "jumpy" and not smooth left to right, right to left motions. 

 

Can someone please point me in the right direction?  

 

Thanks!



 

See the Pen rNvVxpe by moonunit7 (@moonunit7) on CodePen

Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums!!

 

I believe you are on the right track with your approach. Just a few pointers.

 

No need to add an onComplete or onUpdate callback in a timeline instance that is going to trigger a new GSAP instance, just replace the onComplete with another .to(), .from() or .fromTo() instance (depending on what you intend to do) after the instance, and replace the onUpdate with, again, a .to(), .from() or .fromTo() instance using the less than sign "<" as the position parameter and give it the same duration.

 

I'm not sure if this code does what you're after:

TL_items
  .to(".item-description-2", {
    opacity: 1,
  })
  .to(".item-description-2", {
      autoAlpha: 0
    })
  .to(".item-2", {
    x: "23vw", //slide in from left - out of view into view
  })
  .to(".item-1", {
    x: "55vw", // slide to the right of screen - but not out of view
    ease: "power2.out",
  })
  .to(".item-description-1", {
    autoAlpha: 1 // fade in description when centre stage
  })
  .to(".item-2", {
    x: "0vw", // slide to centre
  })
  .to(".item-description-2", {
    autoAlpha: 1 // fade in description when centre stage
  })
  .to(".item-1", {
    x: "0vw", // slide to the right of screen
    ease: "power2.out",
  })
  .to(".item-description-1", {
    autoAlpha: 0 // fade out description when not centre stage
  }, "<")
  .to(".item-2", {
    x: "-43vw", // slide to centre
  })
  .to(".item-description-2", {
    autoAlpha: 0 // fade out description when not centre stage
  })
  .to(".item-3", {
    x: "-55vw", // slide in from out of view
    ease: "power2.out",
  })
  .to(".item-description-3", {
    autoAlpha: 1 // fade in description when centre stage
  })
  .to(".item-2", {
    x: "-75vw", // slide in from out of view
    ease: "power2.out"
  })
  .to(".item-3", {
    x: "-75vw", // slide in from out of view
    ease: "power2.out",
  })
  .to(".item-description-3", {
    autoAlpha: 1 // fade in description when centre stage
  })
  .to(".item-3", {
    x: "-175vw", // slide in from out of view
    ease: "power2.out",
  })
  .to(".item-description-3", {
    autoAlpha: 0 // fade out description when not centre stage
  }, "<-=0.25");

But as you can see is far simpler to follow than the usage of onComplete and onUpdate.

 

Finally take a look at the docs for the GSAP Timeline's position parameter:

And take a look at the documentation regarding easing as well, to ensure that you're using the correct syntax:

https://greensock.com/docs/v3/Eases

 

Happy Tweening!!!

 

  • Like 2
  • Thanks 1
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.
×