Tony Astley

Not at all, thanks for the responses and I got where I needed to go in the end.

Hello, this pretty much achieves what I was looking for: .flickity-enabled *[data-banner-animated] { transform-origin: left center; transition: all; transition-duration: 0.5s; transition-delay: 0; &[data-banner-animated='fade-in'] { opacity: 0; } &[data-banner-animated='fade-left'] { opacity: 0; transform: translateX(calc(-30px)); } &[data-banner-animated='fade-right'] { opacity: 0; transform: translateX(calc(30px)); } &[data-banner-animated='fade-down'] { opacity: 0; transform: translateY(calc(-30px)); } &[data-banner-animated='fade-up'] { opacity: 0; transform: translateY(calc(30px)); } &[data-banner-animated='scale-left'] { opacity: 0; transform-origin: center left; transform: scaleX(0); } &[data-banner-animated='scale-right'] { opacity: 0; transform-origin: center right; transform: scaleX(0); } &[data-banner-animated='scale-down'] { opacity: 0; transform-origin: top left; transform: scaleY(0); } &[data-banner-animated='scale-up'] { opacity: 0; transform-origin: bottom left; transform: scaleY(0); } &[data-banner-animated='wipe-left'] { opacity: 0; clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%); } &[data-banner-animated='wipe-right'] { opacity: 0; clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); } &[data-banner-animated='wipe-down'] { opacity: 0; clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); } &[data-banner-animated='wipe-up'] { opacity: 0; clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); } &[data-banner-animated='zoom-up'] { opacity: 0; transform: scale(0.8); } &[data-banner-animated='zoom-down'] { opacity: 0; transform: scale(1.2); } } .is-selected *[data-banner-animated] { opacity: 1; scale: 1; transform: none; &[data-banner-animated='wipe-left'], &[data-banner-animated='wipe-right'], &[data-banner-animated='wipe-down'], &[data-banner-animated='wipe-up'] { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } }

I've decided to go a different route using the flickity events. I was hoping to be able to re-use the animation mark-up, save creating two sets of animations to maintain, but this new route is probably for the best anyway.

Notice how the first slide GSAP animations work, but the second slides do not. I'll take a look at the mutation observer to see if I can work it out.

The banners aren't always in view and are not always multiples.

Flickity adds a class to the active slide of '.is-selected', what I want to happen is when that class gets added the animations to start. Currently this works for the first item, but when the new slides are show and the class is added no animation occurs. I'm guessing it's something to do with the markup flickity adds to the Dom not being picked up by gsap.

It's essentially a gap.to animation. The starting point is set by the css, a few of the attributes are called in from the elements markup (I tried to recreate something similar to AOS). /*All other elements*/ const targets = gsap.utils.toArray('.is-selected *[data-gsap-animated]'); targets.forEach(target => { /*Get attributes from element*/ animation = target.getAttribute('data-gsap-animated'); delay = target.getAttribute('data-gsap-delay'); duration = target.getAttribute('data-gsap-duration'); start = target.getAttribute('data-gsap-start'); end = target.getAttribute('data-gsap-end'); /*Set defaults if none found*/ if(!delay) { delay = 0; } if(!duration) { duration = 0.5; } if(!start) { start = "top 95%"; } if(!end) { end = "top 60%"; } /*Manipulate ScrollTrigger if in viewport*/ if (isInViewport(target) ) { scrollSettings = { trigger: target, }; } else { scrollSettings = { trigger: target, start: start, end: end, scrub: 0.5, }; } /*Manipulate Clip Path if animation contains wipe*/ if(animation.includes("wipe")){ clipPathSettings = "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"; } else { clipPathSettings = ""; } /*Animate the element*/ gsap.to(target, { opacity: 1, scale: 1, duration: duration, delay: delay, transform: "none", clipPath: clipPathSettings, scrollTrigger: scrollSettings, }); /*Reset to default */ delay = 0; duration = 0.5; start = "top 90%"; end = "top 60%"; }); }

Hopefully a quick question. I have a flickity.js banner system with GSAP animated elements within each banner. However I'm struggling to get GSAP to work on anything other than the first banner. I've tried targeting the elements in the current banner: const targets = gsap.utils.toArray('.is-selected .animatedBannerElement[gsap-animated]'); However this only works for the first banner? When the second banner becomes visible and has .is-selected class added nothing happens. I've tried calling ScrollTrigger.refresh(); from flickity.js but that doesn't work either? Am I missing something obvious?