GSAP + Flickity

[Chris Prieto]

After weighing out all the pros and cons of using something pre-made or making my own pure GSAP slider I decided to try and force GSAP and Flickity to work together. I was surprised I got this working at all. The original codepen I forked was morphing SVG shapes so it may not be the prettiest code in the world.

 

Now that I have something working, I am attempting to add an intro animation to build out the slider itself but when I try and tween the buttons/pager dots nothing happens. I suspect it is because they are added on page load via flickity.

 

So I am wondering if there is a way for GSAP to animate stuff that is added when page loads? Hopefully that makes sense.

See the Pen vwQBGM by ionz149 (@ionz149) on CodePen

[OSUblake]

You can't animate something that doesn't exist. Create flickity first, then create your animations.

 

 

 

[OSUblake]

Step 1: Create flickity

Step 2: Create your animations

 

See the Pen 108c25d74385329a639812460b56e014 by osublake (@osublake) on CodePen

 

[Chris Prieto]

oh man, I feel so dense ?

 

Well, thank you! I was well into researching a bunch of things that were not this lol it is literally flickity first and tweens second ?‍♂️

[OSUblake]

Haha. I knew my first post confused you when I noticed you were searching for stuff on loading. 

 

 

[Chris Prieto]

6 minutes ago, OSUblake said:

Haha. I knew my first post confused you when I noticed you were searching for stuff on loading. 

 

 

 

hah I did not know my searches were visible. I was mid replying and was like well lemme see if I can figure this out (nope!). It is much appreciated.

[OSUblake]

My bad. Your searches aren't visible, just where you are on the site. If you hover over somebody's name/avatar when they are online, it will show what they are currently viewing.