PG1

Hi, Unfortunately I can't share my pen as it's private but wondering if there are common issues that cause my problem: I have added gsap dev tools into my pen, and when i strip all other code out it works (can interact with it). But when I have my code all included, I can see the devtools but am totally unable to interact with them. Are there common gotchas here? Where do the tools sit in the z-index? (I don't think it's that). Ay ideas welcome

Are you able to pass the delay in as a variable to the function that creates the timelines?

Both great answers thanks guys!!!

In this pen I have a timeline. It has 4 '.to' statements, representing two pairs providing different animations where the card on the right moves, then moves back to its starting point. As part of a wider project, I'd like to be able to pass in a movement, or one of these pairs, as a variable. What I'm trying looks a little like this: const variable = ` <-- trying using backticks .to(".card1", { x: "-60px", duration: 0.5, ease: "power4.inOut" }) .to(".card1", { x: "0px", duration: 1, ease: "power2.inOut" })` tl .variable <-- PASSING THIS IN DOESN'T WORK .to(".card1", { rotation: "-45deg", duration: 0.2, ease: "power1.inOut" }) .to(".card1", { rotation: "360deg", duration: 1, delay: 0.2, ease: "power1.inOut" }); I'm sure there's an easy solution here. I guess the next question i'll have is how you would pass in these variables conditionally... like can you embed a ternary into the chain? Thanks!!

Wonderful I knew there'd be something!! Thanks Cassie - seems you pop up to help on every platform I ask questions on

Hi, Sorry for such a broad question but can someone point me toward a pen or gsap example of a jumping effect - text, icon, whatever - im struggling to recreate a realistic jump effect (i'm thinking squash a little, explode upward, realistic physics arc and then squash a little on landing sort of thing). Codepen link shows the effect i want to build. Any help much appreciated. Pete

(attached pen is just an example implementation of the basic DrawSVG). Hi, I'm looking to generate some sort of burn effect, sort of as if a laser moved across the screen, leaving burn marks behind it. If I had a shape I wanted to 'burn around', like the attached, how would I best achieve? I think I'd need: Bright leading edge of the draw process Darker draw colour left behind Maybe some gradient Am I attempting the impossible or are there obvious tricks that could help? Cheers

Hi, I'm playing around with the text burn in and out from snorkltv here: https://codepen.io/snorkltv/pen/rNLLZGR (the first 90 lines of my javascript are pulled from here). What I'm trying to do in my pen is trigger the burn out effect when i mouse enter the panel. This currently works. When the mouse leaves the panel, I'd like the text to 'burn in' again, but it doesn't. You can see the function is called from my console log statement on line 92...) ideally I'd also like the text to initially "burn in" on page load too. Any ideas where I'm going wrong? Maybe I should be using different timelines... Thanks in advance!

That perfect thankyou - congrats for the first flip answer finished product: https://codepen.io/petegarvin1/full/oNzqMqO

I'm trying to animate the two effects such that the circles will cross in the center. I saw something similar in tonights launch presentation around 11.49 into the video (well, i saw an effect that resulted in a similar thing when they were showing 'nested: true' functionality).

Hi, Can anyone help me work out why the flip plugin works to animate the left/right animation but doesn't animate the re-ordering of the circles vertically, even though the class toggle takes effect? Cheers

This is where I got to: https://codepen.io/petegarvin1/pen/YzWgrEp Thanks for the help

thanks for this!

Perfect! thanks so much

Hi, So I'm making a revolving kebab sign because... well, I'm making one - let's leave it there. I'm having trouble with the z-index of the stick element and the revolving text. I would ideally like the text to pass over the stick element at the front of the rotation, and behind it as it goes round the back. Currently, it sits behind it at both points. I've tried a few things, but my current idea is that I can apply and remove the '.back' class (css line 55) to the stick element as the text goes round. I could use some sort of timer, but guessing gsap would be better. Open to any other ides for achieving this too. Cheers

Thanks, I'm actually having a couple of issues tweaking it - I'll mention here but let me know if better on a new thread... The box shadow transition happens great on ignition, but the transition back to no box shadow doesn't happen (it just disappears) when you click to turn the button off. Might be because I'm setting it back to 'none'... The tween in question happens at line 60 in the JS. It's animated in at line 29. Any ideas?

Final pen sorted and here if interested: https://codepen.io/petegarvin1/full/ZEOrPjL

Interesting thanks, think I know what you mean about continually adding tweens, so hopefully have fixed. I try to stay away from fromTo since reading that common mistakes article but will watch out for good uses. In terms of performance, what would you recommend for this? Doesn't matter for the pen, but I'm interested

Thanks - not great looking for gsap help and forgetting all the JS basics! worked a treat thanks

Hi, I have a chunky box shadow definition in my CSS. As the pens shows, it generates a light pulsing shadow, currently using css keyframes. I'm having timing / delay issues and would like to animate it in GSAP. My issue is that when I try to set this up, codepen is giving me an error "Uncaught SyntaxError: Unexpected number" - visible if you uncomment the JS. Any ideas what I'm doing wrong here?

Perfect thankyou - didn't realise you could set the scroller!

Hi, In the pen the coloured div has an overflow that is scrollable vertically. I am hoping I can capture user scroll velocity when scrolling within it, so that I can keep the rest of the page static to display the results... is this possible? Cheers

Brilliant article - got my dashed line working in no time - thanks so much!

Also - I note from other forum posts that dashed paths weren't supported by the plugin (although some workarounds were offered), has this changed recently? Those posts were a few years old