carousel slider on scrollTrigger

[themustardcat]

Hi guys, I am new here I wanted to create slider like this on the webiste https://andtea.com/ , where text changes and right section moves in circular fashion. any example or thread will be helpful.

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[mvaneijgen]

Hi @themustardcat welcome to the forum!

 

The website doesn't load for me and when it does load elements are missing. I would suggest opening up a codepen.io and create a minimal demo. Keep in mind the best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in!

 

If you are stuck with the animation, please post back here and layout for us what you think should happen instead of what is happing with the animation. Hope it helps and happy tweening! 

[themustardcat]

Hey @mvaneijgen Thanks for quick response! 

Open this link on edit on codepen, it looks buggy in embedded frames

See the Pen WNgGKNB by themustardcat (@themustardcat) on CodePen

Attached codepen link, you can see the working example here, although it is not done with Gsap/scrolltrigger. I was wondering how can this be done with Gsap.

[mvaneijgen]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

I would suggest opening your own codepen and laying out all your elements. Then try your hands at a few animations, my suggestion would be start with highlighting the text, this is easy just change the color from black to blue. Then try adding the images, this is just an rotation with the anker point somewhere off screen. Again to be clear, remove anything that has to do with ScrollTrigger, you're building an animation that is the most importing thing, if you have an animation ScrollTrigger will be trivial!

 

If you've got your own minimal demo with some GSAP animations and your stuck just post back here and any one will point you in the right direction! I'm not trying to be mean, but you learn so much more by getting your hands dirty! Really hope it helps and happy tweening!

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly.