Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

1 Newbie

About BhanuSingh

  • Rank
  1. 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 ?
  2. 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 i
  3. 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', },
  4. 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 : 'o
  5. As my every letter is one path, I have to covert each of them, simultaneously to actually morph the entier text ?
  6. 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>]
  7. 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 ?
  8. 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.
  9. 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.
  10. 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 on
  11. 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.
  12. 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
  13. I think, I have worked something up. Would really appreciate if someone could check it out. https://codepen.io/bhanu-krenovate/pen/zYqGxYQ
  14. 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 her
  15. 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.