Justin N

Hi, For anyone else experiencing unexpected morphs and shifting positions, the solution is straight forward. In your graphics editing software, what you will want to find is an option to flatten transforms when exporting. Background rectangles don't always fix transform issues. Appreciate the replies @PointC, but your original reply suggested adding a box which does not address the issues. Your latter suggestion points out the transform issues, appreciate it but found it while addressing the box issue which did not help.

Hi @PointC ! Hmmm, if that were the case, why would tweening one letter with another letter (including the 'a') work ? Thanks Justin

Hi, I have an SVG and I would like to morph between the letters and the icon in the SVG. What I've noticed is that I can morph the letter paths to other letter paths and I can morph the icon paths to other icon paths. However, when I try to morph the icon paths to letter paths, the icon paths appear to scale down and / or move and disappear. What is happening and how do I fix this please ? Thanks Justin

Hello Rodrigo, It's subtle but there in (https://greensock.com/react) . If you look on the GSAP+React page, you'll see examples in which useLayoutEffect is applied but there is not creation of the tl inside of those. There is one exception on that page in which they show that it is better to create the timeline in useLayoutEffect and to use a useRef outside. Since the GSAP + React page (https://greensock.com/react) is likely one of the first pages a new user would look for if working in React, do you think it would be better to explicitly show the creation of the timeline in the useLayoutEffect hook ? Below is a snag of one of the examples from that page:

Thank you both for your advice. You're absolutely right about the tl creating a new instance on every render and it doesn't make that much sense. Just a note, I think most of the examples in the docs for GSAP+React shows the tl being created outside the useLayoutEffect. It may not crash things but there are definitely unexpected side effects / behaviour. I find the useRef option handy especially when you might want to access the timeline beyond the component mount / dismount. Cheers !

Hello, I know it can be frustrating to continuously direct people to read the documentation and look at the examples, so I want to say that I have been working on this issue for over a week. I have tried rebuilding this numerous times following the guides. Now while coding the CodePen example for this post, some of the issues I had worked! So, instead of saying, it's not doing what I want, I want to ask for some code review please. What am I trying to do? - I have an app that has various react components being added and removed. - The components have animations - I would like to do two things in terms of animations in these: - Create an animation on load and be able to navigate the timeline of tweens added within the useLayoutEffect - Add to the timeline depending on actions Review: - Is this the correct general approach to adding animations in components that appear on a SPA ? - The reverse appears to work for both the tween in the useLayoutEffect and the tween added via button click. - Playing after the reverse appears to work. - Is it correct to put the tl var in the array [] for useLayoutEffect? I did this because without it, I get a warning that it should be there. CodeSandbox Example

Hi @elegantseagulls, Thank you for pointing me to the Observer! That is exactly the solution that I need, thus removing my need to create space to make the scroller work. Now, on to the other problem ... the animation not working. I had added a note while you were replying about this. If you load the pen and either add or remove the line of code: drawSVG: 0 below the scrollTrigger{ } object, you will notice the app update with correct markers. For clarification, if you see: scrollTrigger: { ... }, drawSVG: 0 then remove the line. If it's not there, add it. What am I doing wrong that I have to do this to make the animation work ? Thanks!

CodeSandbox Example Hi, I would like to use ScrollTrigger to scrub through the timeline of an animation. The animation all happens within a div containing an svg. I can get this to work in the above code sample if I add a div under the svg with height so that there is overflow and scrolling. How can I achieve the same without the unnecessary space below the svg ? Additionally, I think you will find a bit of a bug in my code. I find that when I run the app, the scroll trigger will not work unless I add or remove (depending on if it is there or not) the line "drawSVG: 0" after the scrollTrigger{ }. If I make any changes, I usually have to repeat the process of either adding or removing that line to get the animation to run again. Many thanks!

Hi, Thanks to Cassie and Craig, they've helped me animate continuously the scrolling of three background images. The solution involves horizontally moving an image from left to right. A copy of the image is placed after the first original image so that the image never stops. I've kept the edges clean so that you can see (straight vertical sides) where one image ends and the next begins. However, disregarding the fact that I haven't matched the start and end edges of the image, you can see that a line is formed in which the update isn't drawing quite fast enough as the image positions are updated. I've tried overlapping the side by side images but that didn't seem to help. Notice the line in the back tree layer (dark green) on the left half of the screen. Any ideas Please ? ScrollingBackgroundArtifact.mov

Hi. Thanks to you both Cassie and Craig. So, please read this with a smile and chuckle (i.e. it's meant to be friendly!) Since you are both in a little competition to see who is faster, may I up your challenge? You both post numerous correct answers ... would you both be willing to beef up the answers a tad with a little more code comments or explanation in your answers? On this round, I awarded Cassie the acceptable solution since she was first and neither of you a) described the solution, yes even you Craig! You said what you do but you didn't say why and b) neither of you added any comments in your code ! LOL Now seriously though, THANK YOU BOTH !

I am looking through the forum to find ideas for how I might make a scrolling background that repeats. I'm thinking the approach I want to take is something like using two images that span the viewport, one tagged to the end of the other. Both will animate say along x, and when the first is fully off the screen, I'd like to move that one behind the second one. I figured that maybe I could use a repeat function with an onUpdate to detect when the 'leading image' is fully off the screen then set the position behind the trailing image. Things that I know I'll need but can't figure out is a) how do I detect the first image has scrolled out of the viewport? b) how do I put the leading image right behind the trailing image? Many thanks!

No, I'm not using React. However, I am using Bootstrap which I assume adds a layer of complexity. Thank you ! Justin

Hello Miranoir, I'm wondering if you have an update on this fix please? I have come across this exact problem. I am tweeting from random values so trying to reengineer this to a .to tween is not possible unless I remove the randomness, and who wants that ! lol. I have tried the lazy: false but that did not fix the issue in Safari and Firefox on Mac. many thanks!