Search the Community

Firstly, ❤️ this! Secondly... wish I was better at it I'm using Locomotive scroll and Splitting.js which chunks up my text into spans, ready to animate. Great stuff. Locomotive scroll adds a is-inview class when a div is entering the viewport making it the perfect opportunity to start my GSAP animation so you get a word after a word effect as it enters the viewport. import { gsap } from "gsap"; import { PixiPlugin } from "gsap/PixiPlugin.js"; import { MotionPathPlugin } from "gsap/MotionPathPlugin.js"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); if (document.querySelector("[data-splitting]")){ gsap.from('.is-inview .char', { duration: .5, ease: "power2.out", opacity: 0, y: '50%' , delay: 20, stagger: .005 }) } On page load, Locomotive adds this is-inview class to everything above the fold so the animation above ^ works perfectly, However, GSAP has now run and finished so when I scroll down the page the letters don't animate in one after the other. They are just visible. You can see it's nested above .is-inview .char so whenever .is-inview is applied .char does it's thing - like it does initially on page load. I don't want to repeat (as in once you've scrolled past it, it shouldn't animate out and in again) so the repeat option for GSAP doesn't seem right - do you know how else can I achieve this? I almost need it to keep checking to see if .is-inview is applied and then if it is, run it again to everything that hasn't already run. I just can't get my head around that part 😕 Boooo! I saw a post on here that mentions scrollTrigger but this blows my CPU when I querySelectorAll(".char"). The page might have a lot of these spans. const sections = document.querySelectorAll(".char"); sections.forEach((section) => { gsap.to(section, { scrollTrigger: { trigger: section, markers: true, start: "top center" }, borderTopLeftRadius: 0, borderTopRightRadius: 0, duration: 1 }); }); A h2 on my site when all the JS has compiled for Locomotive & Splitting for example looks like this -if it's any help <h2 class="c-heading -h2 words chars splitting is-inview" data-splitting="" data-scroll="data-scroll" data-scroll-offset="500" style="--word-total:1; --char-total:9;"> <span class="word" data-word="eCommerce" style="--word-index:0;"> <span class="char" data-char="e" style="--char-index:0;">e</span> <span class="char" data-char="C" style="--char-index:1;">C</span> <span class="char" data-char="o" style="--char-index:2;">o</span> <span class="char" data-char="m" style="--char-index:3;">m</span> <span class="char" data-char="m" style="--char-index:4;">m</span> <span class="char" data-char="e" style="--char-index:5;">e</span> <span class="char" data-char="r" style="--char-index:6;">r</span> <span class="char" data-char="c" style="--char-index:7;">c</span> <span class="char" data-char="e" style="--char-index:8;">e</span> </span> </h2> Appreciate any guidance - Thanks!

Hello everybody, so far I am loving this plugin it is a great tool and this site is a great resource and I appreciate all the work that has been done in delivering such a great tool. I have a timeline that I created. The timline is not really that important. Just in case though: var tweenArticle = new TimelineMax() .from($('header.food_header > hgroup'), 3, {opacity:0, top:'-40px', ease: Power4.easeOut},0) .from($('article.food > section > summary > p'), 3, {opacity:0, top:'40px', ease: Power4.easeOut},0); This is the site I am trying to put it on: http://webshowcase.tk/wp1/?page_id=114 This is a wordpress site and what I am trying to do is affect every post on the page. When The article is in the viewport I would like to start animating just the elements in that article and if possible reverse but reverse is not super important at the moment. I can't seem to figure out how to get my timeline to play when the article is in the viewport. Any help would be greatly appreciated. Thank you.