BastiArts

Ahhh now I understand. Totally understandable! I'm sorry. Next time I'll try to isolate it as much as possible. Thank you so much @GreenSock @OSUblake & @Cassie for your excellent support! It finally works now ? Here's my working version: https://codepen.io/BastiArts/pen/PoJXqVX

Update: I finally brought it on the right track The last thing I noticed, is a little flicker when my images are replaced after scrolling through two following video boxes. I think this is because of the scrolltriggers.. ? https://codepen.io/BastiArts/pen/vYeQrLe One question: I used one scrolltrigger on the timeline itself (viewport detection & text animation) and another scrolltrigger for the image animation (for scrubbing, pinning, etc.) within the same timeline. - Am I doing it right this time? By the way: Many thanks for the excellent support!

https://codepen.io/BastiArts/pen/KKXrXvP In my example above, I use the onUpdate Event of the timeline to replace the frames. So this part of the timeline depends on the loaded images. Or can I intercept the onUpdate Event of the timeline at another point in the code? And the other problem is, that I have two types of animations in the video section: 1) the main video part 2) The text animation and I want the text animation to last shorter than the video sequence, but still react to a scrollTrigger, so i created a separate scrolltrigger only for that textbox. Also only the video sections get pinned and the text-containers don't.

Thanks for your quick reply! https://codepen.io/BastiArts/pen/gOGBQBM Unfortunately I'm getting the same problem as yesterday again: Without the viewport detection it works like a charm (but loads all images at once), but as soon as I use the onEnter Method with the ScrollTrigger Object, it breaks. I'm a bit confused now. - Is there something wrong with my timeline(s)?

Sorry, I'll try to explain it better: This is the updated Version. https://codepen.io/BastiArts/pen/jOGeebj Instead of using the Scrolltrigger.batch() Method, I fetch my sections using gsap.utils.toArray() and looping through them. This causes all my video-sections to initialize & fetch all images of the sequences. When using the batch-Method, I was able to initialize only the visible section(s) in the viewport (onEnter Event). So just the necessary images were fetched when the box is entering the viewport. Ideally the frames of the next video box should be loaded one section ahead. This will reduce the initial pageload and make sure, that the majority of the frames are loaded when the users scrolls through the video section. This brings me to my question: - How do I check, if a section enteres the viewport?

Thanks! My intention was to load the necessary images of each sequence if the video-box is visible in the viewport, hence it reduces the loading time of the page significantly. (...or ideally load the frames one section before each video box). Do I have to create a standalone ScrollTrigger in addition to the triggers per container or should I use the IntersectionObserver instead for this case?

Hi, I'm currently experimenting with GSAP and I want to create a scrollanimation, where I can scrub through an image sequence. (The end result should be an animation like on Apple's Homepod Landingpage https://www.apple.com/at/homepod-mini/ ) I already implemented that functionality, but when I re-enter the video section and then scroll to the next box again, the following non-video containers are getting overlapped with the previous ones. - Are nested timelines the right approach? - How can I set different start timings & speeds for each element (in my case the Textbox) within a nested timeline? (e.g. if the image-sequence should last longer (= speed is slower than original)) Or do i need an extra timeline for that? Thanks in advance!