Jump to content
GreenSock

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

mikel last won the day on March 14

mikel had the most liked content!

mikel

Moderators
  • Posts

    2,157
  • Joined

  • Last visited

  • Days Won

    71

Community Answers

  1. mikel's post in splitText carousel animation was marked as the answer   
    Hey @Wizard of Oz
     
    This would be my logic to design a continuous slider.
    Expandable with split text.
    If you are interested in array methods, more e.g. here.
     

    See the Pen qBpZObp by mikeK (@mikeK) on CodePen
     
    Happy tweening ...
    Mikel
  2. mikel's post in Turning circle growing was marked as the answer   
    Hey @fernandocomet,
     
    There are several options:
     

    See the Pen ZEGyeEr by mikeK (@mikeK) on CodePen
     

    See the Pen NWXPpde??editors=1010 by mikeK (@mikeK) on CodePen
     
    Do you mean something like that?
     
    Happy tweening ...
    Mikel
     
  3. mikel's post in is there a ScrollTriger event for scrolling? was marked as the answer   
    Hey @iDad5,
     
    You could use ScrollTrigger.addEventListener.
    Here an example
     

    See the Pen c1099fe6d3d8c43ec2b928f006551450?editors=1010 by mikeK (@mikeK) on CodePen
     
    Happy scrolling ...
    Mikel
     
  4. mikel's post in Morphing to outline was marked as the answer   
    Hey @samwatts1988,
     
    What should be morphed to what result is not really clear to me.
    Here is just one interpretation
     

    See the Pen ExbLxwE?editors=1010 by mikeK (@mikeK) on CodePen
     
    Happy tweening ...
    Mikel
     
  5. mikel's post in ARRAY + RANDOM + REPEAT was marked as the answer   
    Some logic and here we are ...
     

    See the Pen yLPrNKy?editors=1010 by mikeK (@mikeK) on CodePen
     
    Sun is shinning and in a few minutes I am out of home ...
    Mikel
     
  6. mikel's post in Issues with reversing paths for DrawSVG was marked as the answer   
    Hey Allen,
     
    If the two paths for moving point and tail are identical,
    both have the same coords, have the same start/end points, there shouldn't be a problem.
     

    See the Pen NWwJGad??editors=0010 by mikeK (@mikeK) on CodePen
     
    Happy tweening ...
    Mikel
     
     
     
  7. mikel's post in Motion Path was marked as the answer   
    Hey @Yaya,
     
    You need  MotionPathPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline");
    and for the circle a closing  > 
    Plus: an overflow:visible for this SVG.
     

    See the Pen c23ede8ad7873280de000904bac80289??editors=1010 by mikeK (@mikeK) on CodePen
     
    A MotionPath animation based on a circle starts at 3 o'clock.
    You could rotate the circle as you need in advance.
     
    Happy tweening ...
    Mikel
  8. mikel's post in Underline animation on gsap text animation was marked as the answer   
    Hey @Yannis Haismann,
     
    There is always an alternative. Here is an example with GSAP SplitText, where individual letters are animated.
    This also works with single, concrete words.There is always an alternative. 
     

    See the Pen MWOGqJG?editors=0010 by mikeK (@mikeK) on CodePen
     
    Happy splitting ...
    Mikel
     
  9. mikel's post in Use a variable to change a repeated tween duration was marked as the answer   
    Hey @OSUblake,
     
    Simple and cool ...
     

    See the Pen jOaYzYz?editors=1000 by mikeK (@mikeK) on CodePen
     
    Happy speeding ...
    Mikel
     
     
  10. mikel's post in Blow up shape to fill screen was marked as the answer   
    Hey @Jay George P,
     
    Depending on your feelings, try the values:
    end:'+=2000' or more
    scrub: 0.3 for example
    and set the tween ease:'none'
     
    Happy tweening ...
    Mikel
     
     
     
  11. mikel's post in Map animation SVG was marked as the answer   
    Hey @Altea,
     
    This case might help you:
     

    See the Pen KKmdMdX?editors=1010 by mikeK (@mikeK) on CodePen
     
    Happy tweening ...
    Mikel
  12. mikel's post in ScrollTrigger: play/pause/reverse video was marked as the answer   
    Hey @embrion
     
    You could use gsap.delayedCall(3, () => vid.pause()); to pause the video.
     

    See the Pen WNXwvRj??editors=1010 by mikeK (@mikeK) on CodePen
     
    Happy tweening ...
    Mikel
  13. mikel's post in From animation and scrolltrigger referencing the same element was marked as the answer   
    Hey @Zoker,
     
    try a separate scrollTrigger for each element:
     
    gsap.utils.toArray('.fadein').forEach(function(part) { gsap.from(part, { scrollTrigger: { trigger: part, start: "center bottom", end: "bottom bottom", scrub: 0 }, opacity: 0 }); });  
    Happy tweening ...
    Mikel
  14. mikel's post in A function to control the opacity of the element flowing on z-axis was marked as the answer   
    Hey @DexteRs Code,
     
    Maybe you could implement this logic with two stagger-tweens at a proper time
     

    See the Pen zYwOzZq by mikeK (@mikeK) on CodePen
     
    Happy tweening ...
    Mikel
  15. mikel's post in 3D animation motion was marked as the answer   
    Hey SANDY SAMEH,
     
    A prepared CodePen with your case would be a polite gesture, it would save me some effort.
    Does this scenario correspond to what you have in mind?
     

    See the Pen XWgaPMp by mikeK (@mikeK) on CodePen
     
    Happy tweening ...
    Mikel
     
  16. mikel's post in Carousel dots on SVG path (MotionPathPlugin) was marked as the answer   
    Hey VITALIY,
     
    As a starter, this example could be helpful.
     

    See the Pen eYRRgQZ by mikeK (@mikeK) on CodePen
     
    Happy tweening ...
    Mikel
     
     
     
  17. mikel's post in Scrolltrigger multiple animations of one section with divs was marked as the answer   
    Hey Weinde,
     
    You can define the relevant objects for a loop.
    Then this is how it works
     

    See the Pen XWgMvGy?editors=1010 by mikeK (@mikeK) on CodePen
     
    Does that help?
    Mikel
     
     
  18. mikel's post in How to make middle marquee to float to right side was marked as the answer   
    Hey WHIZZBBIG,
     
    This could be an option:
     

    See the Pen abmPjxz by mikeK (@mikeK) on CodePen
     
    Happy tweening ...
    Mikel
  19. mikel's post in ScrollTrigger - play audio when scroll to certain point on the page was marked as the answer   
    Hey @LSchneiderman,
     
    Of course you can also use GreenSock ScrollTrigger.
    Turn up the volume.
     

    See the Pen yLbZJra?editors=1010 by mikeK (@mikeK) on CodePen
     
    Happy tweening ...
    Mikel
     
     
  20. mikel's post in ScrollTrigger with multiples elements and Motionpath was marked as the answer   
    Hey @lgo,
     
    That´s a job for stagger.
     

    See the Pen XWRYVoM by mikeK (@mikeK) on CodePen
     
    Happy tweening ...
    Mikel
  21. mikel's post in How you can improve the animation of the transition between shapes? was marked as the answer   
    Hey @.mdl,
     
    Try a specific position for the SVGs.
     
    svg { position:absolute; top: 50%; left: 50%; width: 50%; height: 50%; overflow: visible; transform: translate(-50%, -50%); }  
    Your code could be simplified a lot more.
     

    See the Pen bGWKWwV by mikeK (@mikeK) on CodePen
     
    Happy scrolling ...
    Mikel
  22. mikel's post in Circle menu was marked as the answer   
    Hey @Sawqa172
     
    Welcome to the GreenSock Forum.
    Maybe this demo will lead you to your goal.
     

    See the Pen abWGrXX by mikeK (@mikeK) on CodePen
     
    Happy scrolling ...
    Mikel
     
     
  23. mikel's post in Reveal SVG like this example was marked as the answer   
    Hey @purple-lightsaber,
     
    You could use GSAP DrawSVG.
     

    See the Pen XWjaBgm by mikeK (@mikeK) on CodePen
     
    Happy tweening ...
    Mikel
     
  24. mikel's post in Move Image clockwise into div was marked as the answer   
    Hey @renny,
     
    Perhaps this example will give you some inspiration.
     

    See the Pen xxdGxNV?editors=1010 by mikeK (@mikeK) on CodePen
     
    Happy scrolling ...
    Mikel
     
  25. mikel's post in How to create a tearing tape animation was marked as the answer   
    Hey @hmontelongo,
     
    Welcome to the GreenSock Forum.
     
     

    See the Pen wvdwKXb by mikeK (@mikeK) on CodePen
     
    Happy tweening ...
    Mikel
     
     
×