BhanuSingh

In this case I want blue circle to come on top of the orange square when the morphing has happened. This is a part of a bigger animation timeline which I am trying to create ? How can I control rendering order, as I belive the first svg takes presidence when morphing to other shape ?

Hey @GreenSock, thanks for the reply. I tried both the adivces. 1. When I tried disabling force3D the blurriness was gone, but the animation was way to gittery. 2. I did increased the svg size considerably large. But no help. This is Size for my AI that I used. Now all the issue is with apple devices. It is running very smooth on windows Chrome/Firefox. No frame drops nothing. Performance Tab in chrome. But when I test the same on apple chrome, I can see frame drops. You can see the red lines indicating frame drops. The link for the animation is : https://agency.krenovate.com/storybook/lacadives/

I was able to resolve if by adding duration. zoomData.slice(1).forEach(data => { if(data.steps) { tl.zoom(".location_island", { scale: data.scale, origin: data.origin, ease: "power1.inOut", }); tl.addLabel( data.label , "<"); data.steps.forEach( step => { if(step.type == 'out') { tl.fromTo(step.el, { autoAlpha: 1, display: 'block', }, { autoAlpha: 0, display: 'none', ease: "power1.inOut", duration: 0.2, }, data.label + "-=10%" ) } if(step.type == 'in') { tl.fromTo(step.el, { autoAlpha: 0, display: 'none', }, { autoAlpha: 1, display: 'block', ease: "power1.inOut" }, data.label + "+=20%" ) } }) } else { tl.zoom(".location_island", { scale: data.scale, origin: data.origin, ease: "power1.inOut" }) } }); });

I have this animation, where I am having a hard time making a particular animation complete in almost 20% or start of a particular label. const zoomData = [ {scale: 1, origin: [0.5, 0.5] }, {scale: 18, origin: [0.685, 0.38], steps: [ { type : 'in', el : '.location_1', }, { type : 'out', el : '#text', }, { type : 'out', el : '.location_wrapper .section-title', }, { type : 'out', el : '.location_wrapper .andaman-key', }, { type : 'in', el : '#htxt', }, ], label : 'empty' }, {scale: 1, origin: [0.5, 0.5], steps: [ { type : 'out', el : '.location_1', }, { type : 'out', el : '#htxt', }, ], label : 'havelock' }, {scale: 18, origin: [0.500, 0.78], steps: [ { type : 'in', el : '.location_2', }, { type : 'in', el : 'svg #ctxt', }, ], label : 'chidiyatapu' }, ]; I have this object which is responsible for setting up the animation. It is used by the following Js to add it to the timeline. zoomData.slice(1).forEach(data => { if(data.steps) { tl.zoom(".location_island", { scale: data.scale, origin: data.origin, ease: "power1.inOut" }); tl.addLabel( data.label , "<"); data.steps.forEach( step => { if(step.type == 'out') { tl.fromTo(step.el, { autoAlpha: 1, display: 'block', }, { autoAlpha: 0, display: 'none', ease: "power1.inOut" }, data.label ) } if(step.type == 'in') { tl.fromTo(step.el, { autoAlpha: 0, display: 'none', }, { autoAlpha: 1, display: 'block', ease: "power1.inOut" }, data.label + "+=20%" ) } }) } else { tl.zoom(".location_island", { scale: data.scale, origin: data.origin, ease: "power1.inOut" }) } }); }); How can I make the text, Our Centers, Andaman Island and `#text` fade away when I am first time zooming inside.

As my every letter is one path, I have to covert each of them, simultaneously to actually morph the entier text ?

Hey I am trying to morph this SVG from krenovate to solutions but wouldn't morph. "Cannot morph a <G> element. Use MorphSVGPlugin.convertToPath() to convert to a path before morphing." From this other post I saw that it was recommended to use MorphSVGPlugin.convertToPath("#krenovate"); which I did but then also I couldn't morph it. One thing I noticed when I used the converToPath function is that when I logged it returned this object : // [object Array] (1) [<path id="krenovate" d=""></path>]

Hey @mikel, this actually worked. The animation is very smooth with inlince scalable vectors. https://codepen.io/bhanusinghR/pen/gOWreJP There is one thing that has not beein fixed and is only an issue for safari browser. Safari is making the SVG go blurry until and unless the animation stops. User has to wait for a bit for it to get clear. It seems like it is loading or processing it. As the google chrome on the same machine is pretty easily handling the scaling. What should I do to solve this issue ?

Hey folks, I have created this animation usign ScrollTrigger which work perfectly fine, but I am having trouble making its performance better for mobile device. No the SVG I am using is of 350kb apprx. I tried to add it on a canvas but couldn't make it work. It beacme blurry when it was rendered on a canvas. I read a lot of threads. https://greensock.com/forums/topic/15292-performance-on-large-complex-svg/ https://greensock.com/forums/topic/26704-improving-performance-of-svg-scale-on-scroll/ But wasn't actually able to make the performance better. Also i am not even scaling my svg to a crazy number, its just 33x of its orignal size. I also tried with PNG, tho working fine on desktop but its a nightmare on mobile devices ? What's the issue with my SVG ?

Hey @ZachSaucier, I saw how you plugged self.kill(); but it still should only run animating after 0.3 and then kill itself. I am sorry if these are very noob questions. I have just started using GSAP seriously for my project.

Hey @ZachSaucier I understood what you are saying, but I am unable to implement some bits. I have successfully hooked my animation to play when the progress is more than 0.3. if(self.progress >= 0.3){ gsap.fromTo('.intro', 2 , {y:0}, {y: '-100%', ease: 'power4.out',}); } You said " Instead you should make sure it's paused" I tried it by if(self.progress < 0.3 ){ gsap.to('.intro', {duration:0, y:"0"}) } doing this and it didn't work. Also even after my intro going -100% off the page onLeave is not called. I didn't add it onUpdate because it would instantly kill everything. Here is the codepen where I tried it. https://codepen.io/bhanu-krenovate/pen/yLOYvRY

Sure, I am trying to get the scroll effect like this https://dpotferstudio.com/, @ZachSaucier. They way I scroll a bit it then snaps to the top. It doesn't respond to my scroll instantly. I would want my scroll to respond once the user has scrolled 30% of the view port from the top.

Hey @ZachSaucier, This was exactly what I wanted. The code looks so simple. I will definitely use ScrollTrigger for all my scroll related animation and thanks for the Codepen. I do have one more question regarding this. I have added an animation to this trigger but I want that animation to apply to the trigger element only when user has scrolled 30% of the screen, until then the scroll should not let my trigger element scroll. What happens is that my scrolls happen and then the animation starts. https://codepen.io/bhanu-krenovate/pen/mdPeXrX

I think, I have worked something up. Would really appreciate if someone could check it out. https://codepen.io/bhanu-krenovate/pen/zYqGxYQ

I am trying to make an animation work. The structure of design is such that. Intro section is on the top of the website. Once the user scrolls through the intro section a animation runs which basically moves the intro section to (-)ive y-axis until it goes away. Once the intro goes outside of the I have to remove the intro section altogether(or prevent it to be scrolled back to the intro section). I was able to set the animation up. But the problem is In my animation when my Intro section animates my hero section with other sections start to scroll. I don't want the hero section or any other section on the page to scroll until the intro section goes away. I am 10 hours into this now. Still unable to fix this.

Thanks @ZachSaucier and @mvaneijgen for showing me the right direction. This is my first animation with GSAP. I will use the advice to position the content at the position before animating in future animations.