MennoPP

Thank you! Finally got it working. On my new site soon but here a video of it. My code now: function workImgAnimation() { const workThumb = gsap.utils.toArray(".work_img_thumb"); workThumb.forEach((el) => { el.addEventListener("click", () => { const state = Flip.getState(".work_img_thumb"); el.classList.toggle("active"); Flip.from(state, { duration: 1, ease: "power1.inOut" }); }); }); }; For the BarbaJS I just load the script when entering the work overview page... And add a delay for the leave BarbaJS animation when going to a work detail page. { name: 'workitem', async leave(data) { const done = this.async(); await delay(1000); done(); }, to: { namespace: [ 'workitem' ] }, from: { namespace: [ 'workoverview' ] } }, { name: 'workoverview', once() { workImgAnimation(); }, async after() { workImgAnimation(); }, to: { namespace: [ 'workoverview' ] } } GSAP and BarbaJS demo.mp4

Here the needed CodePen: I need each .work_link_item page link to trigger the workImgAnimation function, but only for the clicked element and it's .work_img_thumb... Right now in my site the workImgAnimation function is triggered by BarbaJS when any link from the 'work overview' page to a 'work detail' page is clicked. Need it to trigger in this way, but ONLY for the clicked item. https://codepen.io/DESIGNfromWITHIN/pen/WNzoZrb

I trigger this function when moving form a 'work overview' page to a 'work detail' page... It works fine when I have just 1 item on the 'work overview' page. The animation triggered by the BarbaJS transition: function workImgAnimation() { const thumbnail = document.querySelector(".work_img_thumb"); const state = Flip.getState(".work_img_thumb"); thumbnail.classList.toggle("active"); Flip.from(state, { duration: 1, absolute: true, toggleClass: "active", ease: "power1.inOut" }); }; This is the BarbaJS code that triggers the animation: async leave(data) { const done = this.async(); workImgAnimation(); await delay(1000); done(); }, I am hoping someone can help me get it to work when there are multiple 'work_img_thumb' items... Need to only 'trigger' the clicked .work_img_thumb somehow, but my JS skills have been too limited so far.

Thank you all after some tries I have finally fixed it. This code works for me using GSAP + ScrollTrigger + ScrollSmoother + BarbaJS + AlpineJS import Alpine from 'alpinejs' window.Alpine = Alpine Alpine.start() import barba from "@barba/core"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { ScrollSmoother } from "gsap/ScrollSmoother"; gsap.registerPlugin( ScrollTrigger, ScrollSmoother); function contentAnimation () { gsap.set(".animated_ul_title", { opacity:0, x:-20 }); gsap.to(".animated_ul_title", { duration:.4, delay:0, opacity:1, x:0, scrollTrigger: { trigger: ".animated_ul", start: "top bottom-=400px", } }); } function scrollSmootherCreate(){ ScrollSmoother.create({ smooth: 1, effects: true, ignoreMobileResize: true, normalizeScroll: true }); ScrollTrigger.refresh(); }; function galleryScroller(){ const galleryWrapper = document.querySelector('.gallery-wrapper') const gallery = document.querySelector('.gallery') const tl = gsap.timeline() tl.to(gallery, { x: `-${gallery.offsetWidth}`, scrollTrigger: { trigger: galleryWrapper, start: 'top top', end: `+=${gallery.offsetWidth}`, pin: true, scrub: 0.5, } }) } function init(){ // do something before the transition starts barba.hooks.before(() => { }); // do something after the transition finishes barba.hooks.after(() => { ga('set', 'page', window.location.pathname); ga('send', 'pageview'); }); // scroll to the top of the page barba.hooks.enter(() => { window.scrollTo(0, 0); }); barba.init({ transitions: [ { name: 'index', once() { siteFirstLoad(); scrollSmootherCreate(); galleryScroller(); contentAnimation(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async afterLeave() { let triggers = ScrollTrigger.getAll(); triggers.forEach(function (trigger) { trigger.kill(); }); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, async after() { scrollSmootherCreate(); galleryScroller(); contentAnimation(); }, to: { namespace: [ 'index' ] }, }, { name: 'default', once() { contentAnimation(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async afterLeave() { let triggers = ScrollTrigger.getAll(); triggers.forEach(function (trigger) { trigger.kill(); }); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, async after() { scrollSmootherCreate(); contentAnimation(); } } ] }) } window.addEventListener('DOMContentLoaded', function () { init(); });

Thanks, I still can't get it to work. Added the core code to this pen, but the issue is when navigating between pages... Do not see a option for adding a extra HTML page on CodePen. It works fine on first load (and in en below) just not when I move between pages using BarbaJS. If I remove the ScrollSmoother function all works fine even between BarbaJS page changes. So the issue is somehow with ScrollSmoother not 'resetting'. https://codepen.io/DESIGNfromWITHIN/pen/LYQrjMX

Hello I am using this function to start ScrollSmoother (it's fantatsic BTW!) function scrollSmootherCreate(){ ScrollSmoother.create({ smooth: 1, effects: true, ignoreMobileResize: true, normalizeScroll: true }); }; Also added this cleanGSAP function: function cleanGSAP(){ ScrollTrigger.getAll().forEach(t => t.kill(false)); ScrollTrigger.refresh(); window.dispatchEvent(new Event("resize")); }; And use BarbaJS code below for page trantions all works fine on first load. But if i navigate to an other page and then back to home (index), the ScrollSmoother functionality does not work and any JS later fails. (if I remove scrollSmootherCreate(); from the code bewlo all works fine as expected) How can I 'reset' ScrollSmoother before entering back to home? barba.init({ transitions: [ { name: 'index', once() { siteFirstLoad(); scrollSmootherCreate(); contentAnimation(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async beforeEnter() { cleanGSAP(); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, async afterEnter() { scrollSmootherCreate(); contentAnimation(); }, to: { namespace: [ 'index' ] }, }, { name: 'default', once() { siteFirstLoad(); contentAnimation(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async beforeEnter() { cleanGSAP(); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, async afterEnter() { contentAnimation(); }, } ] })

Thank you so much or this. The CleanGSAP helped me get BarbaJS and Scroll trigger working! function galleryScroller(){ ScrollSmoother.create({ smooth: 1, effects: true }); const galleryWrapper = document.querySelector('.gallery-wrapper') const gallery = document.querySelector('.gallery') const tl = gsap.timeline() tl.to(gallery, { x: `-${gallery.offsetWidth}`, scrollTrigger: { trigger: galleryWrapper, start: 'top top', end: `+=${gallery.offsetWidth}`, pin: true, scrub: 0.5, } }) } const cleanGSAP = () => { ScrollTrigger.getAll().forEach(t => t.kill(false)); ScrollTrigger.refresh(); window.dispatchEvent(new Event("resize")); }; barba.init({ transitions: [ { name: 'index', once() { //siteFirstLoad(); galleryScroller(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, async afterEnter() { galleryScroller(); }, to: { namespace: [ 'index' ] }, }, { name: 'default', once() { siteFirstLoad(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async beforeEnter() { cleanGSAP(); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, } ] })

Thank you! Indeed the wording could be better... I assumed opacity was watched by default.

Can somebody tell me why flip works but the SVG icons are not transitioning the opacity? (click change to see animation) The CSS position is transitioning using GSAP Flip, but the opacity is not. function animateCryptoIcons() { const state = Flip.getState(".cryptoIcon"); group.classList.toggle("cryptoIconAnimated"); Flip.from(state, { absolute: true, duration: 0.8, stagger: 0.1, ease: "power1.inOut" }); } .cryptoIcon_eur { top: 5%; left: 5%; opacity: 1; } .cryptoIconAnimated .cryptoIcon_eur { top: 25%; left: 55%; opacity: 0; }

This Forum is amazing! Have it working, many thanks. var colorEffect = function(){ gsap.utils.toArray(".colorChange").forEach(function(elem) { var color = elem.getAttribute('data-color'); ScrollTrigger.create({ trigger: elem, start:'top 50%', end:'bottom 50%', onEnter: () => gsap.to('.bgChange', {backgroundColor: color}), onLeave: () => gsap.to('.bgChange', {backgroundColor: 'white'}), onLeaveBack: () => gsap.to('.bgChange', {backgroundColor: 'white'}), onEnterBack: () => gsap.to('.bgChange', {backgroundColor:color}) }); }); };

Hello, I have a small feature I need to get working: Have viewport high sections with on each a client project. The idea is to animate the color of a fixed position sidebar to the client project color that is in view. <section id="#workColorChange0" class="h-screen colorChange" data-client-color"#6a6a6a"> <div class="container flex flex-wrap mx-auto items-center"> <h3>Section 1 content</h3> </div> </section> <section id="#workColorChange1" class="h-screen colorChange" data-client-color"#8ebc22"> <div class="container flex flex-wrap mx-auto items-center"> <h3>Section 2 content</h3> </div> </section> <section id="#workColorChange2" class="h-screen colorChange" data-client-color"#0e0b80"> <div class="container flex flex-wrap mx-auto items-center"> <h3>Section 3 content</h3> </div> </section> I have a basic version working, but have 3 tl. now (one for each scrollTrigger and color) and I am sure this can be done better (also losing the id="workColorChange0". If I set the color in a data-client-color attribute, could I somehow grab that value as a backgroundColor? Maybe use onToggle? My Javascript: var colours = ['#006eab', '#8ebc22', '#0e0b80']; var colorEffect = function(){ gsap.set(".colorChange", { backgroundColor: "#006eab", }); const tl0 = gsap.timeline(); tl.to(".colorChange", { scrollTrigger: { trigger: "#workColorChange0", start: "top center", scrub: true, }, backgroundColor: "#006eab", ease: "none", }); tl.to(".colorChange", { scrollTrigger: { trigger: "#workColorChange1", start: "top center", scrub: true, }, backgroundColor: "#8ebc22", ease: "none", }); tl.to(".colorChange", { scrollTrigger: { trigger: "#workColorChange2", start: "top center", scrub: true, }, backgroundColor: "#0e0b80", ease: "none", }); };