Daniel Hult

That doesn't seem to fix the problem unfortunately

Hi guys, Im trying to import the MorphSVG plugin in a Nuxt project. I've seen some threads here that there has been some confusion about how to import them and I just want to know what you guys recommend. In the image below I've imported gsap as usual and put the morphSVG plugin and the registration inside an if to not run on the server. Inside the mounted hook Im trying to console log the morphSVG plugin, but get an error in the console (2nd image). Anybody know what Im doing wrong?

Yep! The site is https://21-capital.com/ Might just be my eyes tricking me then! Well, thanks for the help

Hey guys, On line 96 in that codepen you can see I've used gsap to animate the "boxes" rotation in the y axis. Why isnt the easing working here?

Hey guys, I have an accordion where I want to have one of the accordion items open and the rest closed. In the codepen link, as you can see the one accordion item that is open doesn't have the smooth animation as the others. Could I somehow tell gsap "if the item is open, reverse the animation" in a way? Or just any guidance would be really appreciated

Ahh, okay! Best to use an actual element then Thanks for the explanation!

Hey guys, I made an image reveal effect and have an intersection observer that runs a master timeline that reveals an image and scales it. The reveal effect is done by using the CSSRule plugin, but it's happening on page load rather than inside the master timeline as expected. Am I doing anything wrong here? Also wondering (since I know especially @OSUblake is super good with scroll things - I've seen your replies to ScrollMagic problems ?) is it a good idea to have an intersection observer in a for each loop? Don't know if this is a good solution or if there is a better way to do it

Thank you for the replies! Will take this into account when choosing what to use next time

Hey, Just going to say first that I am super satisfied with gsap and the whole club greensock platform, and not going to stop using gsap in any way. I just wanted to hear your opinion on pros and cons of using gsap vs something like lottie for web when animating svg's e.g. Complex animations can be very tricky to make on the web, and to my eyes it seems like using bodymovin for after effect to export an animation and make it come to life on the web with lottie library is very easy. People in my team are eager to use this as the main tools for animating svg. Would there be any downside to this vs gsap? I know it's not very easy to give a straight answer, but I just wanted to hear the thoughts from people in this forum

Ah, yeah there it is! One last thing though: Im using z-index on some elements, so they are over the control bar. Is it possible to make the devtools be in front always?

Yep! Take a look here: codepen.io/daniel-hult/pen/abbRxOQ

Hi, I tried to include GSDevTools in a new project that uses version 3 of gsap. It seems like it's not working properly (I can't play the timeline and/or use the bar to scroll through it), is this something that is not fully supported in v3 yet?

Okay, awesome! Loving the new syntax

Hi! Just wondering how I go about chaining my timelines into a master timeline with GSAP 3. What does this become in GSAP 3? let tl = new TimelineMax() Like if that is inside a function would it just be this? const someAnimation = element => { let tl = gsap.timeline() tl.to(element, { duration: 1, x: 100 }) return tl }

No worries! Glad I could help Excited to try the new version of GSAP

Sure! Im using webpack to bundle all my files, so it shouldn't be too old Where would I send you the files?

Okay, I figured it out. I have to replace the import with this: import { gsap } from "gsap/dist/gsap" Maybe this path could be the default when importing so you don't need to specify the dist folder and then gsap again?

Hi! I just installed gsap 3 in a test project with npm install gsap then import with import gsap from 'gsap' And used the following syntax: gsap.to('a', { duration: 1, y: 50, }) This throws this error in the console: Invalid y tween of 50 Missing plugin? gsap.registerPlugin() Do I need to register a plugin to use the normal css properties? I though the gsap object was a replacement for TweenMax. Am I wrong?

Thank you! That fixed it What is the difference between setting it to 1 vs 0.01? Won't it be the same thing happening behind the scenes?

Hey, Why does the animation have a bit of lag/performance issue (not sure what to call it lol) on the first run? Like there is a stutter when the menu expands the first time

Take a look here and maybe it's easier to see what I mean: https://www.loom.com/share/f5915c08ab91417eab01f200b89661de When I first hover the trigger, it takes a little while for it to go from the initial state to the next path. After it's already been hovered, when you hover again it changes almost instantly. I updated the time for the timescale to 0.3s so it's quicker

It probably doesn't take extra time to start it, but it definitely does takes longer time for it to move from initial state to another state than if it is already at one state and you hover over the trigger again ?

@OSUblake Hey again, Your solution worked nice! Just one more question - on the very first hover it takes a little second for the animation to start, but after that it animated quickly when hovering. Is it possible to "make it ready"/run the initial function before you start hovering so it starts instantly?

Awesome! Thanks again for your help

Hey guys, I recently saw @OSUblake blob animation with GSAP and wanted to expand on it by making it start moving when I hover an element. So by default the blob stands still, and when you hover an item it starts moving.. I attached a CodePen with the code and what Im trying to do. Is it possible to start the GSAP animation inside the eventlistener here?