gregor

yeah for sure I just wanted to know if there is already a out of the box "gsap solution", because there are so many plugins and helper functions that it is easy to overlook something thanks for your reply

ok here is the demo https://codepen.io/destroy90210/pen/XWQqYBr

Hi, Ah no, I think I didn't explain it well. the whole grid can be dragged and the grid items should be animated when they are visible in the viewport. this is the markup. <div ref="el_carsGridWrapper" class="bg-white h-screen relative overflow-hidden" > <div ref="el_carsGrid" class="relative grid grid-cols-4 w-[800px] origin-top-left" > <div @click="navigateTo($event)" v-for="i in 50" class="aspect-square border-r border-b border-white-dirty p-2" > <img class="el_car w-full h-full object-contain" :src="carsURL()" /> </div> </div> </div> I will later provide a codepen demo if this is not clear enough.

Hi, I wonder how I could animate elements of a grid that can be dragged in x,y direction. $Draggable.create(el_carsGrid.value, { bounds: el_carsGridWrapper.value, onDrag: function (e) { // calculations by my own? }, }); Should I use the onDragFunction and then check for each element if it is in the viewport or is there already a gsap solution and I didn't find it in the docs? ScrollTrigger.batch will not work, because there is no scrollevent...

ah you have been quicker, thank you for your answer

Ok, I have a nice self conversation tl.add() is the better option, the only thing I don't understand is why it jumps from the first tween in the timeline back to opacity 0.5.... when the flip animation is completed... https://codepen.io/destroy90210/pen/poBjery?editors=1011 Update: ok I think i got it, i need to add opacity: 1 also to the final state, because this would be used at the end as inlinestyles... gsap.set(el_scalingTile, { width: "100%", height: "100vh", top: 0, left: 0, position: "absolute", opacity: 1 // <---- });

I have played around to create a timeline and use call() to start flip, that works. I just have a problem with the timing, because during the flip the main timeline should be paused. I tried to stop and restart it and set the playhead with seek.... but then the scroll trigger of the main timeline does not work... Is this generally the right approach? or should adding a flip to a timeline be done completely differently? https://codepen.io/destroy90210/pen/poBjEvJ?editors=1011 ok small update I played around with enabling and disabling scrollTrigger but still no success https://codepen.io/destroy90210/pen/XWQmNRP?editors=1011

hmm codepen does not appear, try to link it here again https://codepen.io/destroy90210/pen/ExJjyvg?editors=1011 hmm still not loaded... ok I paste it as a string instead of a link https://codepen.io/destroy90210/pen/ExJjyvg?editors=1011

Hello, thank you very much for your answer. Based on that I was able to create the flip effect on its own. What I don't know is how to combine it with a timeline with scrolltrigger so that the flip is executed exactly between 2 other animations https://codepen.io/destroy90210/pen/ExJjyvg?editors=1011

Hello, I have already created the animation with your help (without flip plugin) Now I want to use the flip plugin because i've never used it before and wanted to know how easy it is to rewrite it.... but ehm yeah, I don't get it HAHA That's how far I've come... I'm still struggling with how to apply the flip animation to my existing timeline with a scrollTrigger.... I've tried creating a separate scrollTrigger onStart, but to no success... if anyone can give me a tip on how to recreate this with the flip plugin, I'd be very grateful https://codepen.io/destroy90210/pen/ExJjyvg?editors=1011

I got it somehow running. the trick was to check if the animation has started or not and use different calculations for the yPos, https://codepen.io/destroy90210/pen/XWQbdOv?editors=0011 Not sure if this is best practise but it works

Sorry to bother you again. But can I ask you if you have any idea why the calculations don't work when I add an animation to the timeline that happens before the image is resized? https://codepen.io/destroy90210/pen/LYvPJEv?editors=1011 I played around and got it to work on initial load with when I use a short setTimeout, but resizing is broken again https://codepen.io/destroy90210/pen/oNOXNzW?editors=1011

thank you you are my hero and with your clever calculation, the resizing event is no longer necessary. the invalidateOnRefresh: true is enough, means that the scrolltrigger already listens to resize events by default? But I will definitely give Flip Plugin a try

Hi I have a problem with window resize and getBoundingClientRect().top. Resizing only works if the animation has not started yet, but if the animation of the tile has started and I resize the yPos gets not updated... I created a small demo here https://codepen.io/destroy90210/pen/LYvPJEv?editors=1010 any ideas what I'm doing wrong?

thanks for the help. this solved my problem Another option is to use .client in the file name to load the plugin on the client side only.