Daniel Hult

Hey guys Im trying to make a horizontal scrolling section and have some svg paths drawn as you scroll. My problem is that I don't know how to set the start/end times for the DrawSVGPlugin. At the moment they start at 0 (which makes each one of them start at the same time), so when I have scrolled to the second svg, it's already finished drawing the path. Is it possible to set a left value as a start in scrollTrigger somehow? As in "start when this elements left side is in view"? I've seen some threads on here about animating children in horizontal scroll section, but I couldn't figure out what to set the values to anyway.. Im trying to make something similar to this (as in the horizontal section here): https://www.happymaven.co.uk/

Hey (again ) guys, I haven't worked with svg's much, and Im trying to animate the svg paths here as you scroll.. I want to physically scroll down, and translate the svg to the left and animate the icons as they come into view. I thought this was what horizontal scroll was for in ScrollTrigger? Any tips people also have regarding setting up the svg's are also very welcome. I've read through some of the examples on motiontricks.com, which has been very helpful - but didn't see any examples with a horizontal svg.

Wow, each time I post in this forum I learn something super useful.. Works wonderful! Many thanks

Hey guys, Im trying to animate some vertices positions in Three JS with GSAP and not sure how to setup the GSAP part. Demo code (doesn't work): gsap.to(this.geometry.attributes.position, { array: geometry2.attributes.position.array }); This DOES work (this is what I need to do in GSAP over a set duration): this.geometry.attributes.position.array = geometry2.attributes.position.array; The relevant code in codepen starts on line 165

Yeah, I've come to realize after using gsap for a while.. that it's quite big (in terms of functionality) I sometimes just look through the documentation and find something that I've wondered how to achieve about before. Thanks for the replies guys - very helpful as always

Thanks for the reply! I made this example very reduced because I was just trying to make it easier for you to debug - but I might have a solution anyway with your code Just curious about one more thing. Why do you use this: gsap.utils.toArray('.slide'); I see it in the forums here a lot but never understand why when you can do e.g [...document.querySelectorAll('.something')] or Array.from(....)

Hi guys, Im making kind of a slideshow and have some logic between the slides with GSAP, but having some issues thinking logically.. In the codepen you can see at the bottom that I call the function 3 times manually. I want it to repeat endlessly and loop through the slides. Was trying to do some callback functions on the onComplete and onRepeat, but I think I might just be thinking too hard. Just trying to make the number fade down, then the next one fade up and so on (and then go back to start if it hits the end of the loop). Btw: Im still a club greensock member, just not on this account (I use the other one for work)

So e.g if you move the mouse above the text, the background text will move up, left it will go left and so on..

Hey, It's the effect on this site here (just move your mouse around): https://danielebuffa.me/work Basically just want the duplicate element to move around the original text, but be clamped to max 20px in each direction. Does that make sense?

Hey guys, Hope someone here can help me with a small issue Im having. I want to create an effect where you copy an html element in JS and make that "move around" the original element on mousemove over the original element. Also want to clamp the number it can go in each direction by e.g 20px or something.. I've tried to use gsap's utils clamp function, but I don't couldn't get it working properly. In the codepen at the moment I have the effect working in just one direction (just positive values) without any clamping logic. Anybody that can help me out?

Ah, just missed the curly brackets. Thanks!

Hey, Just wondering how I can simplify my code and wanted to use the keyframes syntax with the attr syntax. Demo code (doesn't work): tl.to('#feturbulence', { keyframes: [ attr: { "baseFrequency": '0.01' }, attr: { "baseFrequency": '0.00' }, ] }) Is it possible to use keyframes with attr like this somehow?

Hi, Not sure if this is correctly gsap related, but not sure what to do here. Im trying to push my site to netlify and get the message in the image below. I have the gsap-bonus.tgz file in root and just installing them with yarn as usual. It works locally. Anybody know what this is?

Perfect! Thanks

Hi guys, This might be very easy, but not sure how to do it. If I have this function here that returns a timeline: export const enterTextAnimation = text => { const tl = gsap.timeline(); tl.to(text, { y: '-100%', opacity: 0, stagger: 0.014, }); return tl; }; And I later use the function like the first line here: How can I run a function onComplete here? const tl = enterTextAnimation(lines.chars); tl.onComplete() (?)...

Hi! I have a timeline on line 112 where I morph and rotate the SVG in the top right corner. Just below the function on line 132 I have the eventlistener on the darkModeToggle for playing and reversing the timeline. Why isn't the timeline reversing back to the original state in the else statement there?

Hi, Was just wondering if there is any way to test out the scroll plugin you're working on, or if there a beta version somewhere? Is there a planned release date?

Ahh, gotcha. Will just setting it to a fixed value work? Or is border radius something specific that can slow down animations?

Hi! I was just trying out the stagger method in gsap to test some things out and tried to replicate your own "Advanced stagger in GSAP 3" codepen. Yours look very smooth, but why is mine so janky and "slow/glitchy"? Here is your original one: https://codepen.io/GreenSock/pen/jdawKx?editors=1010

Okay, I see you had to put this inside the build settings in nuxt.config: Now it works! Sorry again build: { /* ** You can extend webpack config here */ extend() {}, transpile: ['gsap'], },

Sorry, actually there must've been a hiccup here. I get an syntax error when Im trying to import the MorphSVGPlugin. Have you seen this error before?

Very helpful @OSUblake - this solved the issue I was having. I wasn't aware of the gsap-bonus.tgz file that I can add to install them with NPM/Yarn. So the final code after following the video above was: import { gsap } from 'gsap'; import { MorphSVGPlugin } from 'gsap/MorphSVGPlugin'; if (process.client) { gsap.registerPlugin(MorphSVGPlugin); }

I will try and watch the video and see if that helps first! Thanks @OSUblake

Sure! Where do I send it to?

Also this returned undefined. I had to remove the .default at the end. const { gsap } = require("gsap/dist/gsap").default;