iamsebastn

Hey GSAP-Fam! I gave the MorphSVG plugin a shot. But unfortunately it doesn't work as expected. So I have two different SVG's which I want to morph. I also converted the "rect" of the cross to path with the static.convertToPath() method. But in the end I'm always getting the warning: "Cannot morph a <SVG> element. Use MorphSVGPlugin.convertToPath() to convert to a path before morphing." Hopefully, somebody can give me the hint and/or help to make this work Thanks @all

Hey hey, I'm experiencing a strange problem with Splittext. On my upcoming portfolio, I've got a hover-animation, that shows the title of the project once an image is hovered. So far so good. But unfortunately the title behaves strange when it comes to line-breaks while it's animated. (Just as you can see in the picture). Either the text breaks into multiple lines at a point that makes no sense, or it doesn't break at all and ignores the given max-width. Below you can see an example of how I implemented it. https://codesandbox.io/s/splittext-linebreak-6w594d?file=/src/index.js Due I'm pretty new to SplitText I'm hoping that you could help me out and/or I hope you can talk out of the sewing box Thanks @all in advance

Hey there! I have some problem, which is breaking my head. I tried to figure it out over the last day but unfortunately I couldn't make it work. My goal is to create a blinking dot which is visible once the user hovers over the element. As soon as the user leaves the element the dot should be opacity 0 again. If the user enters again, the dot should blink again and so on.. What I come out with was, either the dot doesn't blink at all or it just has half of the opacity. So only going up to 50%. I think this is kinda simple and I'm just standing on the hose ? Thank's @all!

@Rodrigo hey there! Thank you for the explanation about the vulnerability! Didn't know that other packages can cause issues. I'm going to inpect this:) Btw, Here's a demo! https://stackblitz.com/edit/nextjs-jtgqe2?file=README.md. So I decided to wrap the page in an provider for the scrolltrigger to work. My thought behind this approach was, that when I turn the layout.js page into a client-component the performance will decrease. But is this the right thought? Or am I wrong, that this doesn't affect performance. Thank you for helping!

Thanks @Rodrigo & @GreenSock! i get it done. Forgot to use npm install gsap@npm:@gsap/shockingly ? Everything works fine! But Is it a usual that I get the message „1 high vulnerability found“ in my terminal when I use npm install gsap@npm:@gsap/shockingly and also the pagespeed goes down with splittert & scrolltrigger? Especially on mobile? That‘s my running code. Unfortunately I can‘t provide a demo right now, cause I‘m on vacation hh But thank you, for your feedback! useIsomorphicLayoutEffect(() => { gsap.registerPlugin(ScrollTrigger, SplitText) const headlines = gsap.utils.toArray("[data-text='headline']") const body = gsap.utils.toArray("[data-text='body']") // headline Animation headlines.forEach((headline) => { let headlineSplit = new SplitText(headline, { type: 'words, chars', }) let chars = headlineSplit.chars gsap.from(chars, { duration: 1.25, opacity: 0, scale: 1.25, ease: 'power2.inOut', stagger: { from: 'random', amount: 0.2, }, scrollTrigger: { trigger: headline, start: 'top 92.5%', }, }) // paragraph animation body.forEach((text) => { let linesplit = new SplitText(text, { type: 'lines', linesClass: 'splitLine', }) let lines = linesplit.lines gsap.from(lines, { duration: 1.5, opacity: 0, yPercent: 45, ease: 'power2.inOut', stagger: 0.15, scrollTrigger: { trigger: lines, start: 'top bottom', }, }) }) }) }, [])

Hey there! I hope I can find an expert who can help me out. I want to add ScrollTrigger and SplitText to my NextJS project. Inside of this project I'm using the new "App-Router". With that said, the problem occurs. The previous "_layout.js" file is now "layout.js". So to register PlugIns only once, I tried to import ScrollTrigger & Splittext like so: import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' // & gsap/ScrollTrigger doesn't work too import { SplitText } from 'gsap/dist/SplitText' // & gsap/SplitText doesn't work too gsap.registerPlugin(ScrollTrigger, SplitText) This works fine at the first glance. Now I want to setup a Provider which provides all the scroll-animations. When I want to access ScrollTrigger or SplitText it "missing plugin"... so it isn't global.. But when I want to import & register the plugins into my provider I get this error on every page-reload. Sooo I don't know what I can do. Hope somebody of you knows how to solve this problem. Or how to use the plugins probably with React in generall.. And I also have to mention, that those error only appear when is add the code gsap.registerPlugin(ScrollTrigger, SplitText) to the page..

Hey thanks! Yep, this nearly saved 10 lines of code haha. The amount of the lines used to get this code running seemed a little bit to much IMO. So I thought if it would be possible to reduce the amount of used lines. Maybe per grouping timelines together and so on.

hey there, My question is, if (for sure) there's a way to summarize timelines? So like in this example , all animations are going to expand over nearly 70 lines of code. Now my question is, if there's any possibility to reduce the amount of lines needed? Or better to collect them together? ? Thank you all in advance!?

Hey Jack! Thank you for getting on my problem! I read a post in the forum, where somebody asked if it would be possible to create a draggable slider with gsap.Observer. So I tried it on my own & it worked. Kinda haha. Anyways, is there a reason (other reason than simplicity) to use Draggable over Observer for a slider? Thanks for the hint! I read through the docs lot carefully this time! I made a few tweaks and the slider with Observer works perfect now! Anyways, like I asked before, what are the reasons, you would choose draggable over observer in order to create a slider? Does draggable causes better performance?

Hey hey, over the last days, I tried to improve my GSAP x React skills and wanted to created a draggable slider with gsap.Observer. So far so good. In theory, it works? but practical it doesn't. The problem is: When I drag the element the drag isn't smooth. It jumps and jumps. I played a little bit with .onUpdate. On the first glance it seems kinda working. But it crashes the boundaries (0-100%) and also makes the jump more worse. Soooo tbh I'm at a point where I'm stumped. Any help on how to make this smooth is much appreciated? https://codesandbox.io/s/draggable-example-kwrfp1?file=/src/slider.jsx

Yep! That's it. I forgot about the .current. Dayum! Thank you very much!

Hey GSAP-Folks! gsap in combination with React is a fairly new topic for me. And I'm encountering warnings, that I've never saw before. (Attached below) Can somebody may explain me, what those mean? I just try to animate the yPercentage & width of an element And yeah, at the top of the file, I imported gsap like import { gsap } from 'gsap' Although when I put ...from 'gsap/all' it doesn't work. Here's a nearly similar animation in comparison to what I want to achieve with HTML, CSS & JS: https://codesandbox.io/s/ancient-framework-bqb7gw?file=/src/index.js This works fine.. Hope, somebody can may explain me that weird warning. Thank you in advance!

Hey there! First of all, I'm quite new to GSAP in combination with React. For the current project I'm using NextJs. And what I want to achieve is, when hovering over a link, a line animates. Right now, I'm using modular styles for the styling. That's the structure. What I want to achieve is, that when the user is hovering over the linkWrapper class, the linkLine animates from a width of 0% to a width of 100%. Unfortunately I don't know how to achieve this with NextJS & GSAP. <div className={styles.linkWrapper} onMouseEnter={onEnter} onMouseLeave={onLeave}> <Link href="#">V.1.1 / Y2023</Link> <div className={styles.linkLine}></div> </div>

Hey people! I have one question. I have this animation: tl.fromTo( ".main-wrapper", { blur: 20, opacity: 0 }, { blur: 0, opacity: 1, duration: 5, ease: "bounce.in" } ); So far so good. The animation works fine. Except one part. What I want to achieve is that the opacity should have it's custom ease (like for example "linear") . While the rest should be the bounce.in animation. is it possible to give the opacity it's own easing while on the same timeline?