Sonix

Thanks for the answers, both work well for me!

Hi, I would like to animate circles in an Svg. So that each one blinks up for a short time, and then the next one and so on. A made a gif animation so it should be clear. I thought about blending in and out each one through the opacity, but I don't know how to stage them. The svg is in the codepen demo. I am new to gsap so what's the best way to do this?

Sorry that the repo didn't work, I thought it would be easier and more precise if you have the same code as I. I simply can't reproduce the code in a codepen or so, because i use vue router and also the structure would not be the same. So I will invest more time and probably find the issue... Thanks for the support!

Here is the Github code, so you can reproduce the issue precisely.

Hi, back with a code pen: CodePen Reveal on scroll So in the CodePen demo everything works fine. I think i need to somehow rerender the Dom with vue after the Gsap animation is called. I tried to add a window.addEventListener('load', () => {}or document.onreadystatechange but non of these worked. Here is the Page with the issue. Again the issue only appears if the visitor is rerouted from home to the project("/bildprache" in this case). Thanks already!

Hi, i have the following issue: I am making a Website using Vuejs and would like to use the ScrollTrigger in a sub-page. On this sub-page images should be revealed on scroll using the ScrollTrigger and toArray. However for some reason the starting point "top bottom" is only set properly for the first image at the first visit of the site. On all following images the start trigger is kind of the same as the first one, which shouldn't be the case. If i reload the page or visit it for the second time, everything works properly and the start and end triggers are at the right place. I don't know whether this i a vue, webpack or gsap bug, or do i miss something? How it should look like and does on reload. On first load mounted() { gsap.utils.toArray(".anim").forEach(anim => { gsap.from(anim, { scrollTrigger: { start: "top bottom", end: "top center", markers: true, scrub: 1, trigger: anim }, y: 120, opacity: 0.3 }) }) }