elegantseagulls

Hi @Zahir Rafiq, This is simplified to two grids, but it'll give you a starting point. Also note: I'm using gsap3 syntax for it. https://codepen.io/elegantseagulls/pen/jOExVKX?editors=0010

Hi @Zahir Rafiq, You could, in your click event, check the progress of your other timelines, and if it is greater than 0, reverse it back to 0, then use onReverseComplete in GSAP to trigger the play of the clicked icon, and if progress is 0 just play timeline as normal.

Hi @monixm, It looks like you are using the old GSAP 2 syntax, but are importing the GSAP 3 javascript. I'd check your package.json file to make sure netlify knows which version of GSAP to import, or convert your code to the new GSAP 3 syntax (GSAP 3 is a much smaller file size!).

Hi @jsco, I ran your svg through SVGOMG (https://jakearchibald.github.io/svgomg/), and that stripped the transform from the path, while keeping it in the same positioning. Updated SVG is here: https://codepen.io/ryan_labar/pen/yLyKByw

Hi @Yasir, Like I mentioned, you'll likely want to preload the full size image in a fixed position container to animate them from their thumbnail position on the page (scale will animate smoother than height/width, but you'll loose some ability to change the crop/overlfow ratio during the animation), to full viewport size. To get position of your clicked thumbnail you can use something like: element.getBoundingClientRect();

Hi @Yasir, Your css setup is preventing your .box from going full-width. Adding flex-wrap: wrap; on the container will help, but you may run into some other issues with that. You'll also likely run into some image quality issues with this method. To create something like this, without canvas, I'd likely preload the fullsize images and scale it in from the clicked position on a fixed position, full-screen div, that way you can control the final image relative to the viewport (going full screen). This is somewhat similar to what the referenced site is doing, at a quick glance.

@eomerb I'm not super familiar with jQuery, but for the json handling I believe you should be able to run your SplitText on jqXHR.done(); With that,display: none; wont work, (unless you change it to block before creating your SplitText) as display none won't allow the browser to measure the width, as there isn't one with display none. SplitText will run before your Timeline start, so you'll want to change to display block just before creating your SplitText.

@redtoad It might be a caching issue, but is your updated CodePen at the same link? I'm still seeing the same issues. Also, my gut says that it's going to be hard on performance to do a mouse follow animation inside the SVG, as that can't be hardware accelerated. Also, just looking at the GSAP code, from what I see: left and top values won't be recognized in SVG for positioning of you cicada (an SVG group) so you'll want to use x and y instead.

Hi @redtoad, You aren't including gsap.js, or registering your plugins in your CodePen, so I wasn't able to see anything happening. For mouse follows, this is a good example: https://codepen.io/GreenSock/pen/WNNNBpo More details in the docs for the quickSetter here: https://greensock.com/docs/v3/GSAP/gsap.quickSetter()

@eomerb With my suggestion, if you're loading the text in with json, you'll still need to make sure the content is rendered to the dom (I'm not sure sure what tech stack you're using to manage the json requests, but you may find this useful:https://www.sitepoint.com/guide-vanilla-ajax-without-jquery/ ). A quick test to check if the error is due to wrapping the text before it's completely rendered to the dom is to add a timeout function to the SplitText function to see if that fixes it.

Hi @eomerb, With words/chars, SplitText doesn't need to measure anything, it's just looking at the text for characters and spaces and splitting it based on that, but for lines the element needs to be completely rendered to the dom, so that SplitText can measure the width of each line. Have you tried targeting the class or id you're generating instead of the var you're creating in JS: const split = new SplitText('.animatingDiv',{type:"lines"})? That may help.

Hi @eomerb It's tough to say without seeing your local env (and I couldn't get the codepen to misbehave), but my hunch is that SplitText is running before the element is fully rendered the dom, so it isn't able get the proper measurements to split it into lines.

Hi @InTheOne, Browsers don't like it when you change the source of an image, as it has to check/repaint the entire image, which is likely the cause of issue in FF. To eliminate this, I would load all your images to the dom and use your tween display/hide them with opacity/visibility (autoAlpha), or better, yet, stitch the images together as a sprite sheet, and tween between them via transform, using a stepped ease, (hardware accelerated) in an overflow hidden div (similar to this example: https://codepen.io/elegantseagulls/pen/MBWqYX).

Hi @Hossein Rahimi, I'm not entirely sure what you have happening in your animation, but I believe the slow/delayed feel you're getting may be because of your tween's duration is causing the tweens to stack up (you're telling it to do a new 0.5s tween to a new value on every tick). Instead of this, you may want to consider using gsap's quicksetter method for this: https://greensock.com/docs/v3/GSAP/gsap.quickSetter() The other way would be to define your animation first, and use scroll position to update the tl.progress() I also prefer to use gsap's ticker (https://greensock.com/docs/v3/GSAP/gsap.ticker) over requestAnimationFrame(), but that's a personal preference thing (performance will be very similar)

Hi @Jess.Park, To achieve that arc path (left/right and vertical, with rotation), you could just set the transformOrigin to have a negative Y value, and that way you could control the radius of your rotation, using the diff as above. This example doesn't use the diff, but you can see the negative transformOrigin value in action: https://codepen.io/ryan_labar/pen/QWwqbog