Richard1604

hi there Sergio, I'm just a newbie but according to my recent investigations you can only animate the same svg exactly once so you either need multiple copies of the svg or one big one with the elements duplicated inside. Obviously if you get them appropriate class names and id then you only need a simple animation script and can also stagger the animations if you so wish. I believe that the recommendation is to have a single svg but I may be wrong. Richard

Hi Jan I had a recent ScrollTrigger thread and if you take a look at it then ZachS came up with some js which puts this kind of animation in a loop. I think you might find it helpful.

It’s separate to the gsap core so you need a link to it or download it from a cdn or wherever you get your source from. check out the documentation For the plugin and the installation page on this site. you will also need to register the plugin with gsap.registerPlugin(CSSRulePlugin]; in your js script.

Hi midnight gamer, you could try using unsplash.com or another of the free picture sites like lorry.picsum that serve up Random images On demand instead of loading up your assets into codepen. i think that would help explain your issue more clearly.

Yes of course you do, i was only trying to be helpful as a better understanding of the original effect provides A deeper insight into how it might be achieved in greensock.

A google search comes up with this article which describes in detail how that effect was originally achieved https://tympanus.net/codrops/2019/07/10/how-to-add-smooth-scrolling-with-inner-image-animations-to-a-web-page/

yes that's a nice effect. If you look at that page and turn on the developer tools then it looks like the pics are divs with background images and position absolute with a translate transformation.

The fabulous thing about this forum is that there are so many different and varied responses to a question. I have only been here for a few weeks but I now have a database of over a hundred different examples to draw on!

Hello alle, im sure that you will get a lot of help here and come to like using your new tool set. im just a newbie but looking at your post I think that you ought to check out MorphSVGPlugin and it’s ability to take an SVG and transform to a new set of points using Gsap.to() there is some good explanation and lots of examples In the documentation where you can take an svg and morph to a final shape. obviously you can also approach it from the opposite direction using gsap.from()

@ZachSaucierMany thanks for your most valuable assistance on this!

Hi Hemanta, try this W3 Schools tutorial https://www.w3schools.com/graphics/svg_intro.asp it's a very gentle intro and is a very good place to start - then try moving on to building your own simple paths.

thanks zach, yes that post is the basis of what I have been working on to remove the FOUC. Updated codepen here: https://codepen.io/rb1604/pen/WNwogem the animation is wrapped in a window.addEventListener("load") function and I added visibility: hidden to the body element and used autoAlpha on the tween.. it now animates smoothly from beginning to the end of the page and back again until it gets back to the first section where there is a *big flash* on the transition from indigo back to the first section.

just familiarising myself with the SVG Q command and found this useful link https://blogs.sitepointstatic.com/examples/tech/svg-curves/quadratic-curve.html where you can experiment with the parameter values in a GUI. I thought it might be helpful to others too so that you can see how the quadratic curve is defined by the coordinates

Hi Hemanta, here is a youtube video that walks through a similar process using anime.js Most of the work involves creating the svg so you might find it helpful from that point of view. After that I think that you can put together a tween using the MorphSVGPlugin https://www.youtube.com/watch?v=LKwXoaFwYFk Richard

Hi Zach, I've updated my pen (above) to include your expert changes and taken out the extraneous nonsense and the final data-scroll which is unrequired. It is now working perfectly except that the very first transition is accompanied by a FOUC. I have tried various combinations of visibility and autoAlpha (on the body element) to no avail and even replaced the second colour to white in the hope that the flash is lost but to no avail. Ideally it would be fantastic if I can make that first transition smooth but I am now at a loss for further suggestions and wonder if there is a solution.

thanks very much for this advice Zach. I did wonder if there was a better way of approaching this problem so I will give it a whirl tomorrow when I am feeling fresh and bright but your pen certainly seems to hit the mark.

Hi Zach, thanks for getting back, I will try to explain it more clearly. elephant.is has a very nice background transition effect which I would describe as being ScrollTrigger-like: the background colour changes with each section and appears to be triggered by the end of the image in the previous section coming off the bottom of the screen. I have coded this in the example and as you scroll down the page it works ok with a transition from grey-> purple-> red. The issue comes when you scroll back up to the top of the screen in the at the expected transition from red->purple is not triggered when expected or goes to grey without a proper transition via purple. Hope this helps, Richard.

i've been admiring another award winning site https://elephant.is/ and managed to get a fairly decent transition using ScrollToPlugin (once I solved the state issue by wrapping the code in a javascript document.onload function). ScrollTrigger seems a bit less successful. There is an problem reversing the sequence going from red (section 3) back to purple (section 2) and the general "feel" isn't quite right. Not sure whether I should try using a "smooth scroll" so advice and feedback welcome please.

Hello all, well I inevitably took out a subscription yesterday and I've been happily playing my new toys. Here's an fairly simple example of a geometric animation using MotionPathPlugin to move some circles around. it took me a while to work out how to create the path but I found this link https://mavo.io/demos/svgpath/ which helps to build a path from basic svg elements. It thought it might be useful for others who are starting out with svg.

Thanks Very much mike. i will look at this and learn...

Hello, I've been attempting to draw the stroke around a triangle or a triangular path but without any success despite reading the docs and searching for a similar problem. I can get the stroke to change colour on a triangle (but not draw) and the path approach doesnt seem to work either. Guidance will be appreciated.

think of it as a short hand for writing a rather longer piece of code; you are passing a selector ".panel" to gsap.set(). this creates an array of targets to process [".panel", ".panel", ".panel"] with three elements. the loop is effectively: for each target in targets: target.z-index = targets.length-i where i is the loop index use to address the array. my description may not be the precise way that an expert would use but this is the gist.

It’s a JavaScript arrow function which is called for each or the panel elements and sets the z indices Of the panels to a series of descending values . you might imagine that there is an implied for each loop generated by the function which runs over each of the targets.

i use a different script for each html page. alternatively don't include your home.js script in about.js if you get my drift.

hi again Riyas these error messages indicate that the specified selectors cannot be found by gsap so therefore cannot be processed. eg if you are using the code suggested by zach earlier in your javascript then the html should have a corresponding element. That is a reference to ".top" in your tween or trigger requires a class="top" somewhere in your html that can be resolved at runtime.