animationmagic

Thanks so much to @Rodrigo, @mvaneijgen and you @GreenSock for helping me understand the concepts here. I am wondering if zIndex as one of the optional properties should be remove from the documentation here https://gsap.com/docs/v3/Plugins/Flip/ in that case, as it cannot be set here. I now made my animation work and it's looking great! Thank you!

I found out that if I write the onComplete like this it returns this as the Tween. onComplete: () => { console.log(this) } while when I write it with this syntax this returns the Vue instance for me onComplete: function() { console.log(this) } Then my second question is resolved:) and I would just like to understand why zIndex directly on Flip.fit() does not take effect but setting it on the onStart works.

Hey @mvaneijgenthanks for coming back to me so quickly! This works great. Is there a reason using zIndex directly with Flip does nothing but setting it on onStart works? On other issue I have with the setup you proposed is that I need to set the zIndex back to 1 on animation complete but it cannot find this.targets()[0] in the onComplete. onStart: function(){ gsap.set(this.targets()[0], { zIndex: 99, }) }, onComplete: () => { gsap.set(this.targets()[0], { zIndex: 1, }) }

Hi there, I just tried out Flip and must say, I love it! I've tried to build a webpage with two container and want one of them to fill out the whole main container on animation. The h2s in my build have to have z-index=50 for another animation. My issue is, that even though I set the zIndex here to 99 it does not take effect. Flip.fit("#box-two", ".main-container", { duration: 0.5, ease: "expo.inOut", absolute: true, zIndex: 99 }); Here is a demo of what I am trying to do https://codepen.io/lisaschumann/pen/KKEmQLq Any help is greatly appreciated!

I'm having the same issue, when trying to npm install gsap in my new nuxt project. I keep getting "Cannot find module 'gsap/ScrollTrigger.min.js'" even after I followed all above steps. Could the issue be that I had originally used "npm install ./gsap-bonus.tgz" and then reverted to the above? I tried everything from left to right now ??

@OSUblake Thanks so much, this worked like a charm. Really appreciate your help!

Hi @Cassie! What setting would you have to use to have the text on the line morph into the circle but kind of 90deg further along the circle so it sits on top of it. Thanks so much☺️

Thanks for your reply @OSUblake - I thought about that but they you could only move between those two states, right? Is there a way to create a random clip-path?

Hi there! I'm trying to create this kind of animation, a morphing mask over an image: https://www.nikki-kay.com/ It seems like this is a lottie animation. What way would you suggest, if I wanted to recreate this with GSAP? A morphing mask, or a clip path? Ideally I want to add more animation layers around it, so not sure if a lottie animation would be best. Thanks so much for your help! Lisa

Thanks so much @PointC - it is working like a charm now... https://codepen.io/lisaschumann/pen/ZEXjRyJ

Hi @PointC, Thanks so much for your help. This is great! I added it in, but it seems I am missing something since the right leaf comes in from way to the right side. Am I missing something on the transformOrigin? https://codepen.io/lisaschumann/pen/ZEXjRyJ Absolutely love GSAP!

Hi there, I'm trying to have the leafs of the logo grow like in this gif, but I am struggling to make it scale from the origin point and draw it. Thanks for your help! Image from iOS.MP4

Hi everyone! I've got 2 issues: 1. The second ScrollTrigger animation on my page (the purple section) has their markers off. Although it is set to start "top 0" it starts way below. 2. The second animation has lots of white space underneath it created by the pin spacer. Is there a way to hide that scroll space? Thanks so much!

That makes sense! Thanks for your help @akapowl - saved the day:)

Thanks so much @akapowl that works GREAT. When I enable smooth scrolling with it, it seems to be causing an issue though. Did that happen to you before too? I think I can disable smooth scrolling for now, but would be great to know how you deal with it:) https://codepen.io/lisaschumann/pen/qBjzVyj