GSAP Hero Slider

[Louienator]

Hi, i saw this tutorial online as i've searched for examples of GSAP Hero Image slider,  and I've copied the code and tested on jsfiddle, there's an error that says "unexpected token 'const'". I've tried changing the colon to equals and still the same and also I want to have the flexibility to change the autoplay speed and I want to add an autoplay..

Here's my duplicate version.
https://jsfiddle.net/1euba8jd/13/

And so far, I've recreated another version but, to no avail it's not working.
https://jsfiddle.net/q3ahsfmu/114/

The reason that I've copied this code because it has similar hero transition to this website that I wanna achieve https://www.resortkaskady.com/ . I wanna do a slider similar to that with a structure same as slick with autoplay.

Thank you

See the Pen pooQEXO by Neo24 (@Neo24) on CodePen

[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 - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at 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. 

[Rodrigo]

Hi,

 

Yeah there is too much code in there. In JS Fiddle you have to select Typescript from the dropdown at the top/left corner of the JS section and even when you do that there is another error because Util is undefined:

declare const Util: any;

You create the type declaration but you're not creating Util anywhere.

 

Hopefully this helps.

Happy Tweening!

[Louienator]

Hello, thanks for the help. Though i get the concept on the basic slider using vanilla, now, I wanna apply gsap animations to it like every change or slide of image, there's an easing or some effect. and at the end, it will go back directly to the 1st slide, not sliding from end to start.  Because, this is the animation I want to achieve for the hero section: https://www.resortkaskady.com/

here's my fiddle:
https://jsfiddle.net/9zmuqgxe/62/

 

or how to wrap this line: slide.style.transform = `translateX(-${counter * 100}%)`; so that I can animate this.
Cheers,

Louie V.

[Rodrigo]

Hi,

 

You can borrow some of the logic in this demo:

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

 

Hopefully this helps.

Happy Tweening!

[Louienator]

Hi @Rodrigo,

 

Thanks for the reference, and I'm duplicating it trying to customize it to the way I want but, still can't follow or replicate the animation transition to the way i want. 

https://www.resortkaskady.com/

my fiddle: 
https://jsfiddle.net/mnywdztj/47/


Cheers,

[Rodrigo]

Hi,

 

The demo you're linking uses clip path and a timer. For that you can use GSAP Delayed Call:

https://gsap.com/docs/v3/GSAP/gsap.delayedCall()

 

This is a very useful tool for working with Clip Path.

https://bennettfeely.com/clippy/

 

Here is a simple demo:

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

 

Last bu not least you should check this thread by @mvaneijgen about masking:

 

Hopefully this helps.

Happy Tweening!

[Louienator]

Thanks for the quick response @Rodrigo.. However, i've tweaked your code a bit and find out how to reverse the mask when it reaches the last slide and transition back to the first slide. And also, animate the current slide to the left to give way to the next slide.

 

Here's my fiddle: 

https://jsfiddle.net/s1xwc0yf/115/

[Rodrigo]

Hi,

 

I'm not sure if you have a follow up question or not, but mostly this is about JS logic rather than a GSAP related situation TBH.