TheChris

Thanks for the fast reply, I tried your solution but sadly it didn't work. The markers start and end are being placed right before and after the div, so thats oke. But the animation still starts when you're at the top of the page. I'll try to make a minimal demo.

Hello, I created a counter animation using GSAP, but I'm experiencing an issue where the animation starts before the 'div' with the '[data-counter]' attribute comes into view. Can someone provide some insight into this problem? function dataCounter() { const numbers = document.querySelectorAll('[data-counter]'); var tl = gsap.timeline({ scrollTrigger: { trigger: numbers, start: '100%', markers: true, toggleActions: 'play none none none', }, }); function animateCounter(elements, decimalPlaces) { elements.forEach(function (el) { const targetValue = parseFloat(el.getAttribute('data-target')); var target = { val: 0 }; tl.to(target, { val: targetValue, duration: 1, onUpdate: function () { el.innerText = target.val.toFixed(decimalPlaces); }, }); }); } const counterOneElements = document.querySelectorAll('[data-counter="counterOne"]'); const counterTwoElements = document.querySelectorAll('[data-counter="counterTwo"]'); const counterThreeElements = document.querySelectorAll('[data-counter="counterThree"]'); animateCounter(counterOneElements, 0); animateCounter(counterTwoElements, 0); animateCounter(counterThreeElements, 1); tl.play(); }

Thanks for your comment! With Google Site Kit you can link Google Analytics and Search Console. I think it's pretty innocent. The only thing I can think of is, you can also link Google Tag Manager, which could affect the performance of the website. But then I would have expected an error message or something. Do you have an example how I can do this? Not a problem, I'm happy with the help that I get. A lot has changed, some for better some for worse. Thanks

A small update. I just downloaded the database from production and then (locally) GSAP no longer works. When I disable the following WordPress plugin, GSAP works: 'Site Kit'; https://wordpress.org/plugins/google-site-kit/ The weird thing is that I don't have an error message in my console.

Hi, Thanks for your comment! This was our first step in GSAP, so there is no doubt that things can be done better or differently. I've uploaded two video clips, so you can see how it works locally and on production. https://www.veed.io/view/611cefae-7a6c-4197-817c-aa27c56d786e https://www.veed.io/view/2d517fce-e129-4845-a66a-b728437a76b3 In production you see that SmoothScroll no longer works, and the reveal of images or animations of the titles no longer work either. There are currently no error messages to see. We don't use Vue or React. It is also a fairly simple WordPress website (Sage) that we have polished with GSAP. Thanks! PS: Bedankt voor het compliment

Hello, A few months ago we've built a website with GSAP. The strange thing is, it just stopped working correctly. Animations will load when you resize the browser, ScrollSmoother stopped working whatever you do. When I view my project locally, everything works.. You can view the production version here; http://bitly.ws/BPNt animation.js // GSAP import {gsap} from 'gsap'; import {ScrollTrigger} from 'gsap/ScrollTrigger'; import {ScrollSmoother} from 'gsap/ScrollSmoother'; import {SplitText} from 'gsap/SplitText'; gsap.registerPlugin(ScrollTrigger, ScrollSmoother, SplitText); // jQuery jQuery(function() { // ScrollSmoother let smoother = ScrollSmoother.create({ smooth: 2, effects: true }); // Split Text if(document.querySelector('.js-split-text')) { var childSplit = new SplitText('.js-split-text', { type: 'lines', linesClass: 'inline-block' }); var parentSplit = new SplitText('.js-split-text', { type: 'lines', linesClass: 'overflow-hidden' }); gsap.set(childSplit.lines, {opacity: 0}); ScrollTrigger.batch(childSplit.lines, { onEnter: batch => { gsap.set(batch, { opacity: 1, yPercent: 100 }); gsap.to(batch, { yPercent: 0, duration: 1.5, ease: 'power4', stagger: 0.3 }); }, start: 'bottom 95%', once: true }); } // Reveal Image if(document.querySelector('.js-reveal-img')) { let revealContainers = document.querySelectorAll('.js-reveal-img'); revealContainers.forEach((container) => { let image = container.querySelector('img'); let tl = gsap.timeline({ scrollTrigger: { trigger: container, once: true } }); tl.set(container, { autoAlpha: 1 }); tl.from(container, 1.5, { xPercent: -100, ease: 'power2.inOut' }); tl.from(image, 1.5, { xPercent: 100, scale: 1.3, delay: -1.5, ease: 'power2.inOut' }); }); } // Items Fade if(document.querySelector('.js-items-fade')) { $('.js-items-fade').each(function (index) { let triggerElement = $(this); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, start: '0% 100%', end: '100% 0%', } }); tl.from('.js-items-fade .js-item', { y: '2em', opacity: 0, stagger: .2, duration: 1, ease: 'power3.inOut', delay: '.2' }, 0); }); } }); Dependencies; "@alpinejs/collapse": "^3.10.2", "@barba/core": "^2.9.7", "@gsap/shockingly": "^3.10.4", "@roots/bud": "5.8.7", "@roots/bud-postcss": "^5.8.7", "@roots/bud-sass": "^5.8.7", "@roots/bud-tailwindcss": "5.8.7", "@roots/sage": "5.8.7", "@tailwindcss/typography": "^0.5.2", "alpinejs": "^3.10.2", "flickity": "^3.0.0", "gsap": "npm:@gsap/shockingly", "js-cookie": "^3.0.1" Any help would be appreciated! Thanks

Hi Cassie, Thanks for the reply. I think it's fixed now, I moved the .npmrc file to the themes folder in stead of the root of the WordPress installation folder. Thanks for the help!

Hello, Last friday I joined the GreenSock club for the amazing tools. It took some time for me to figure it out but locally I have it running. I use it in combination with Sage/Bedrock. I added the following package to my project; "gsap": "npm:@gsap/shockingly", And I added the .npmrc file containing my token. As I said locally I have it running, I'm using the following plugins; import {gsap} from 'gsap'; import {ScrollTrigger} from 'gsap/ScrollTrigger'; import {ScrollSmoother} from 'gsap/ScrollSmoother'; import {SplitText} from 'gsap/SplitText'; gsap.registerPlugin(ScrollTrigger, ScrollSmoother, SplitText); Now that I can use ScrollSmoother I could get rid of Locomotive. But whenever I try to deploy my project to the server I run into this error; Error: https://npm.greensock.com/@gsap%2fshockingly/-/shockingly-3.10.4.tgz: Request failed "403 Forbidden" Which is strange because the .npmrc file containing my token is present in the root of my project. So has anyone an idea why this happens? More info in the logs; Arguments: /opt/nodejs/bin/node /usr/share/yarn/bin/yarn.js install --network-timeout 60000 PATH: /usr/local/cmb-git/lib/git-core:/data/sites/web/--mysite--//.local/bin:/usr/local/bin:/usr/bin:/bin Yarn version: 1.22.19 Node version: 16.15.1 Platform: linux x64 Trace: Error: https://npm.greensock.com/@gsap%2fshockingly/-/shockingly-3.10.4.tgz: Request failed "403 Forbidden" at ResponseError.ExtendableBuiltin (/usr/share/yarn/lib/cli.js:696:66) at new ResponseError (/usr/share/yarn/lib/cli.js:802:124) at Request.<anonymous> (/usr/share/yarn/lib/cli.js:66215:16) at Request.emit (node:events:527:28) at Request.module.exports.Request.onRequestResponse (/usr/share/yarn/lib/cli.js:141767:10) at ClientRequest.emit (node:events:527:28) at HTTPParser.parserOnIncomingClient (node:_http_client:631:27) at HTTPParser.parserOnHeadersComplete (node:_http_common:128:17) at TLSSocket.socketOnData (node:_http_client:494:22) at TLSSocket.emit (node:events:527:28)