moonunit7 Posted September 5, 2022 Share Posted September 5, 2022 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 More sharing options...
Solution Rodrigo Posted September 6, 2022 Solution Share Posted September 6, 2022 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!!! 2 1 Link to comment Share on other sites More sharing options...
moonunit7 Posted September 6, 2022 Author Share Posted September 6, 2022 Thanks @Rodrigo ! I'll give that a go. Link to comment Share on other sites More sharing options...
moonunit7 Posted September 6, 2022 Author Share Posted September 6, 2022 OMG! YOU @Rodrigo are a LEGEND!!!!!! It's works! 🥳 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now