JamesGrubb

Thanks burning the midnight oil @PointC

Hi all. Attempting to animate a stroke's dasharray. The pen shows the intended animation with css keyframes and the gsap code i've attempted to use to no avail. Any ideas please

Thanks for looking in to this. In the current codepen my last two lines of javascript are intended to clear the timeline when the the window matches the query but it is currently preventing the timeline from working at all. When you remove the if statement, at narrow viewport i am animating an mask-imge to reveal the nav on mobile, unintentionally thought, the animation is affecting the nav's opacity at wider viewports (min-width: 40em). Im trying to clear the timeline for wider viewports. Hope that makes sense?

Hello, Im trying to prevent a timeline from affecting the visibility of my nav item at wider screens (min-width: 30em) I was trying with tl.clear(window.matchMedia('min-width: 30em')) as I thought clear() took a boolean value? I then tried it in an if statement but no joy. Any ideas please?

Ahh, thanks!

hm. adding the utility class 'hidden' to the parent div breaks the toggle?

Thanks for the tween @Rodrigo Would you mind explaining how I would start with the <h1></h1> hidden?

Thank you for pointing me in the right direction @PointC

Hi I have animated mask triggered by a toggle. If the user click the toggle button repeatidly the animation does not have time to play through. Is there a way of resetting the animaion. and or reversing the animation on the second click. Thanks in advance

Thank you @elegantseagulls

have tried `"mask-size": "400%"`

BTW Trying to scale the mask

Hi all having a little trouble with mask-image syntax. Could someone ha a look please. Many thanks

Hello thank you for getting back to me. I appreciate it was a rather open question. I will certainly put up a codepen when I get something going. Thank you @Richard1604 and @ZachSaucier Alpine does seem to be used for simple toggle actions so I thought it might be a good fit for controlling gsap timelines. @Richard1604 I agree that using vanilla JS is the best approach. I put the question in the forum just incase someone had any thoughts. Thanks again. See you here later.

Hello there. Wondered if anyone had any experience with Alpine.js to toggle Gsap animations? Thanks in advance

Yeah let's leave it at that. Thanks so much for your time anyway.

...but I will want to minify the javascript before build?

Thanks. Im only just getting my head around static file generators. Hows your knowledge? As I can fathom a common practice is to serve files and folders from a 'build' or 'public' or 'dist' folder. Should I copy the entire gsap node_module to the dist folder (for example) so I can reference it with import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';

Hi Thank you for your replies. I have not come across exception/reference before. I ha a wild stab in the dark writing a jsconfig.json file and including the following code: "typeAcquisition": { "include": [ "gsap" ] }

Hello, sorry no visuals for this question. Im trying to setup Gsap with eleventy.js a static site generator. I would like to use module imports, but should I be using the CDN instead? Also If I use the CDN and and my index.html links to a main.js file how do I reference gsap inside of the main.js file. I realise these are general javascript questions so appologies.

Ah, ok thanks for your time and swift response. Much appreciated.

Just been playing some more. I might have fixed this but would appreciate some feedback. I added tl.reverse(-1) updated codpen

Hi. Im porting over an example created in this forum demonstrating toggling an animation using Gsap 2.1.3/TweenMax.min Im trying to recreate the same toggling function using with Gsap 3.4.2/gsap.min. I've kep the code the same except change new TimelineMax() to gsap.timeline() , but im getting a jump at the neginning of the animation. Original pen here Hope you can help.

Brill, thanks again

Thank you for your time. sorry I know it was a little while ago