Jump to content

Trapti last won the day on December 30 2022

Trapti had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Trapti last won the day on December 30 2022

Trapti had the most liked content!


About Trapti

Profile Information

  • Gender
    Not Telling
  • Location
  • Interests
    SVG, animations, CSS, layouts, JavaScript, React

Recent Profile Visitors

2,293 profile views
  1. Since you are using .from tween. You can set initial scale of the SVG to be 3 using `gsap.set("svg", {scale: 3})`. So initially it will be 3 and then from tween will go 0.1-3.
  2. Increase the scaling, as of now it is going from o.1 to 1. Make it bigger like 2-3?. To play for long adjust the end value of trigger accordingly.
  3. Hi, if you can describe more on what you are trying to achieve and what have you tried so far. A minimal demo on CodePen will be great. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: Here is bunch of scrollTrigger demos: https://greensock.com/st-demos/
  4. Here is a pen of similar looking effect using splittext. https://codepen.io/tripti1410/pen/abjVKZP?editors=0110
  5. Hi, In order to trigger animation 'scroller-start'(scrollbar's position) should meet 'start'(trigger element's start position). Change the start value to 'start: 'top+=100% bottom' and the animation will run.
  6. Hi, Panel animations. you can find more demos here https://greensock.com/st-demos/ https://codepen.io/GreenSock/pen/KKpLdWW
  7. Hi, Because structurally it is inside the first panel. Keep it outside of panels. https://codepen.io/tripti1410/pen/rNrjrRb
  8. Tailwind's 'hidden' class sets the 'display: none' property. GSAP 'autoAlpha' sets 'visibility' and 'opacity' property. Basically you are dealing with two diff properties so how will they override.
  9. Hi, Welcome to the forum! This is CodePen by @Carl. I hope this is helpful. https://codepen.io/snorkltv/pen/abddMGd
  10. tl.fromTo( ".main-wrapper", { blur: 20, }, { blur: 0, duration: 5, ease: "bounce.in" } ) .fromTo( ".main-wrapper", { opacity: 0 }, { opacity: 1, duration: 5, ease: "linear" }, "<" ); One way is to create a different tween for that.
  11. Hi, In the Codepen the animation is working fine. That is how I want it to be. Problem is Orange color box which is moving on scroll and reaching to the green color section is not visible on the blue color section. I am animating the orange box using Flip plugin. It is not a z-index issue.
  12. if you remove ".align-cc" class flickering will not be there.
  13. To me it looks fine you don't have to use "align-cc" class its already at center. The way text looks before the animation it is same after the animation. Text left align container center to the viewport. Or Am I missing someting?
  14. Hi, No you don't need multiple scrollTrigger. In this pen I dded a timeline and added another tween for drawing. Just make the path reverse and it will be fine. Blog explains reversing: https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/ https://codepen.io/tripti1410/pen/NWzXgdb?editors=1010 you can checkout this ex as well: https://codepen.io/tripti1410/pen/GRyBxeZ
  15. Hi, You are using some other library to control scroll animation. It will be difficult for us to help with that. I suggest - Convert the animation code to use GSAP 3 new version you are currently using TweenMax. - To trigger this animation on scroll use scrollTrigger. And if you face issues will be able to help.