Comments (4)
You said in 3.12.x the images "repeatedly flicker", right? Like back and forth, back and forth (same image)? That sounds quite odd to me and I'd love to explore what's going on in-context. But like you said, that CodePen works great so it's tough to troubleshoot.
I noticed you're animating the very thing that you're using as a trigger which is usually not a good idea because you're moving the very thing whose position is used for the triggering. Typically it's much better to wrap the element and use that wrapper as the trigger (animate the child).
Does the problem only happen at the very end of the page? I see that you're making the element SMALLER which is maybe affecting the overall scrollable area of the page, thus the page ends up scrolling up due to the animation, triggering the ScrollTrigger to reverse, etc.? (A logic issue) I'm completely guessing here, taking shots in the dark since we can't see a minimal demo but maybe this will give you a nudge in the right direction.
I also wonder if it's an issue with dynamically-loading images that are causing the page to reflow, triggering layout updates and resizing(?)
If there's any way to send us a demo that clearly illustrates the issue, that'd be amazingly helpful. Maybe a Stackblitz instead of CodePen? Here's a starter one you can fork: https://stackblitz.com/edit/react-cxv92j
from gsap.
Thank you Jack, I was able to fix the issue.
The problem was caused by a few things. While the problem did happen with all images, regardless of how far down the images are on the page, it did get increasingly worse the further down the page the images were located, which lead me down the right path. You were right on track with the issue being caused by lazy loading and/or dynamically loading other content (SVGs in my case). By making sure that every image and element had its proper dimensions or aspect ratios before initializing Scroll Trigger, I was able to get rid of the problem entirely.
By the way, in the real life example I'm not animating the element which is also the trigger, in the code pen I just simplified the example a little too much.
It's strange though that this problem occurred so prominently in newer GSAP versions. But yeah, thanks a lot.
One more thing, why do you prefer Stackblitz over Codepen nowadays?
from gsap.
Thanks for getting back to us with your results/solution. Like you, I am also curious about why older versions seemed to work better for you but that's difficult for me to explore without a minimal demo that clearly illustrates the issue. If you're ever able to isolate things in a minimal demo I'd be happy to take a peek.
Oh, and we don't favor Stackblitz over Codepen (quite the opposite actually) - it's just that some people find CodePen challenging when they're using a framework like React, Vue, Next.js, etc. or if they've got a setup that requires multiple files or compile steps so I was just offering Stackblitz in case that was easier for you.
from gsap.
No problem! :)
I believe the main issue was that the flickering images (the ones I wanted to animate with Scroll Trigger) had no intrinsic width/height on page load/when initializing ScrollTrigger (due to lazy loading). So the flickering might have happened because to ScrollTrigger the start and end values of the image were very close to each other, due to the low height (maybe even zero height?).
Additionally, there were other images above and below those images, that also didn't have their dimensions properly set. As for why it worked in earlier GSAP versions I don't know.
I'll see if I can whip up a demo that illustrates the problem clearly in the coming days.
from gsap.
Related Issues (20)
- Negative gsap.ticker.time and timelines not playing HOT 4
- Production in vercel , module not found HOT 2
- Is it possible to use GSAP within a Web Worker? HOT 5
- Missing parameter for ScrollTrigger.clearScrollMemory in its TypeScript definition HOT 2
- requestAnimationFrame does not work on WebXR HOT 1
- What is the performance bottleneck of GSAP? HOT 1
- onStart callback is not called after pause HOT 6
- Gsap markers position not working on scroll+refresh | versions > 3.12.2 HOT 9
- GSAP ScrollTrigger causes error in Next.js HOT 3
- Nextjs Gsap ScrollTrigger snapping not working HOT 3
- String values for motionPath array in Typescript HOT 1
- SSL certificate has expired HOT 3
- PixiPlugin: Error with animating fillColor with PixiJS v8
- useGSAP does not cleanup properly when dependencies option is used HOT 1
- Pixijs docs on rotation are wrong
- The Rotation animation has some problems in Flip HOT 4
- Draggable doesn't allow text fields to be blurred HOT 4
- Flip is used in Vue, and the generated elements have no style HOT 1
- Documentation missing for `Draggable.create` HOT 1
- type issue HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gsap.