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.

ok created get the the same error message there [nuxt] [request error] [unhandled] [500] __vite_ssr_import_1__.default.registerPlugin is not a function https://stackblitz.com/edit/nuxt-starter-xn3azs?file=plugins%2Fgsap.js

hi jack, no sry that does not work either... I'm trying to create a demo at Stackblitz

Hi, maybe someone has the same problem with nuxtjs. I wanted to shorten the import of gsap and scrolltrigger a bit and used a plugin. It works locally, but when I generate the pages, I just get this error. this is the plugin import gsap from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' gsap.registerPlugin(ScrollTrigger) export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.use(gsap) nuxtApp.provide('gsap', gsap) nuxtApp.provide('ScrollTrigger', ScrollTrigger) }) now I can use this line to have access to gsap and scrolltrigger const { $gsap, $ScrollTrigger } = useNuxtApp() Does anyone have a idea what is causing the error?

thanks works perfect

Hi, I have a problem with colouring my background. First the header should change its colour from blue to white, later in the page when a component scrolls in the page should become black, but on leave turn back to white. But in my case it is gets blue again. I thought using toggleActions would be the best option. but it doesn't work because the page turns blue again instead of white...

Thank you, the problem was that I didn't place all the cards off the screen in the same place. changed gsap.set(project, {y: index * projectHeight}) to gsap.set(project, {y: window.innerHeight}) now it works, like expected https://codepen.io/destroy90210/pen/RwdRbNp

Hi, I have a simple stack animation for some content. My problem is the animation of the card, which is currently sticky. There should be an overlap between the cards. The animation from card 1 to card 2 is fine, but then card 2 to card 3 there is no overlap anymore. My idea was just start both animations at the same time with the "<" and insert the new one some time later el_projects.value.forEach((project, index) => { if(index > 0){ gsap.set(project, {y: index * projectHeight}) tl2.to(project, {y:0, duration:1, ease:"none"}) tl2.to(lastProject , {opacity: 0, rotation:8, scale:0.8, duration:0.5, ease:"none"},'<0.2') } lastProject = project }) What I'm doing wrong?

thanks for the advice not to animate the pinned element

Okay, thanks. So I can't use the timeline with batch, did I understand that correctly? I need to create a separate scroll trigger for the background animation and a scroll trigger with batch for the list fade effect? And do you have any idea why the padding jumps back after the animation is finished? https://codepen.io/destroy90210/pen/poGqmQr?editors=1010

Hi, I don't get it how to combine scrolltrigger batch with timeline. My animation should look like this: the list of elements should be faded in and then the background changes its size. https://codepen.io/destroy90210/pen/oNmJOXB?editors=1010 and another problem is that the animated padding jumps back after the animation is finished... any ideas why? best, gregor