[draggable grid with batch animation]

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 

[draggable grid with batch animation]

ok here is the demo

See the Pen XWQqYBr by destroy90210 (@destroy90210) on CodePen

 

[draggable grid with batch animation]

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.

 

[draggable grid with batch animation]

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...

 

 

[Adding a flip animation to a timeline with a scrolltrigger]

ah you have been quicker, thank you for your answer

[Adding a flip animation to a timeline with a scrolltrigger]

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...

 

See the Pen poBjery?editors=1011 by destroy90210 (@destroy90210) on CodePen

 

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 // <----
  });

 

[Adding a flip animation to a timeline with a scrolltrigger]

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?

 

See the Pen poBjEvJ?editors=1011 by destroy90210 (@destroy90210) on CodePen

ok small update I played around with enabling and disabling scrollTrigger but still no success

See the Pen XWQmNRP?editors=1011 by destroy90210 (@destroy90210) on CodePen

[Adding a flip animation to a timeline with a scrolltrigger]

hmm codepen does not appear, try to link it here again

hmm still not loaded... ok I paste it as a string instead of a link

 

https://codepen.io/destroy90210/pen/ExJjyvg?editors=1011

 

[Adding a flip animation to a timeline with a scrolltrigger]

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

 

[Adding a flip animation to a timeline with a scrolltrigger]

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

See the Pen ExJjyvg?editors=1011 by destroy90210 (@destroy90210) on CodePen

[update getBoundingClientRect().top onResize]

I got it somehow running. the trick was to check if the animation has started or not and use different calculations for the yPos, 

See the Pen XWQbdOv?editors=0011 by destroy90210 (@destroy90210) on CodePen

 

Not sure if this is best practise but it works

[update getBoundingClientRect().top onResize]

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?

See the Pen LYvPJEv?editors=1011 by destroy90210 (@destroy90210) on CodePen

 

I played around and got it to work on initial load with when I use a short setTimeout, but resizing is broken again

See the Pen oNOXNzW?editors=1011 by destroy90210 (@destroy90210) on CodePen

[update getBoundingClientRect().top onResize]

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

[update getBoundingClientRect().top onResize]

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

 

 

any ideas what I'm doing wrong?

See the Pen LYvPJEv?editors=1010 by destroy90210 (@destroy90210) on CodePen

[gsap nuxtjs plugin]

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.

[gsap nuxtjs plugin]

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

 

 

[gsap nuxtjs plugin]

hi jack,

 

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

[gsap nuxtjs plugin]

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.

[error] [nuxt] [request error] [unhandled] [500] gsap$2.registerPlugin is not a function

 

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?

 

 

[Colouring background on scroll]

thanks works perfect

[Colouring background on scroll]

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...
 

 

 

See the Pen JjzpKOW?editors=1010 by destroy90210 (@destroy90210) on CodePen

[Timing problem when stacking cards with scroll triggers]

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

 

See the Pen RwdRbNp by destroy90210 (@destroy90210) on CodePen

[Timing problem when stacking cards with scroll triggers]

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? 

See the Pen KKEzYzv by destroy90210 (@destroy90210) on CodePen

[timeline with scrolltrigger batch]

thanks for the advice not to animate the pinned element  

[timeline with scrolltrigger batch]

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?

See the Pen poGqmQr?editors=1010 by destroy90210 (@destroy90210) on CodePen

[timeline with scrolltrigger batch]

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.

 

and another problem is that the animated padding jumps back after the animation is finished... any ideas why?

 

best,

gregor

See the Pen oNmJOXB?editors=1010 by destroy90210 (@destroy90210) on CodePen