mikel last won the day on
mikel had the most liked content!
mikel
Moderators-
Posts
2,157 -
Joined
-
Last visited
-
Days Won
71
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by mikel
-
Just another carousel ... https://codepen.io/mikeK/pen/OJNbPwK?editors=0010
-
Hey @emattias, I'm not sure if this is a good solution, but it works. https://codepen.io/mikeK/pen/rNeMgKQ?editors=1010 Happy scrolling ... Mikel
-
Hey @emattias, Welcome to the GreenSock Forum. You could use a delayedCall and e.g. disable the scrollTrigger https://codepen.io/mikeK/pen/LYNRoEM?editors=1010 Happy scrolling ... Mikel
-
Hey @VSBL, You could use an empty tween for example https://codepen.io/mikeK/pen/eYZdxqX Happy scrolling ... Mikel
-
Hey @Keipen123, Time lag: change repeatDelay - and play with the end figure e.g "+=2000" Larger: you could scale the SVG or parts of it. Although I don't want to see him for so long - he always puffs up like that, here's an example: https://codepen.io/mikeK/pen/rNeLjby Just test some alternatives ... Mikel
- 5 replies
-
- 4
-
- svg
- scrolltrigger
-
(and 1 more)
Tagged with:
-
Hey @videomill, Welcome to the GreenSock Forum. Unfortunately your CodePen link is not active (not secured?). Kind regards Mikel
-
... and here a more complex landscape https://codepen.io/mikeK/pen/ZEbWoem
- 5 replies
-
- 3
-
- svg
- scrolltrigger
-
(and 1 more)
Tagged with:
-
Hey @Keipen123, Welcome to the GreenSock Forum. This is an option to make someone pop up briefly and definitely go away again. https://codepen.io/mikeK/pen/abNZvxV Does that help? Happy scrolling ... Mikel
- 5 replies
-
- 3
-
- svg
- scrolltrigger
-
(and 1 more)
Tagged with:
-
Hey @JdF, Thanks. to create a curve its better to define two points: https://codepen.io/mikeK/pen/vYGGwpg Happy curving ... Mikel
-
Hey @Richard1604, DrawSVGPlugin allows you to progressively reveal (or hide) the stroke of an SVG <path>, <line>, <polyline>, <polygon>, <rect>, or <ellipse>. Not the SVG itself. And you could set a path to '0' or you could use a from tween. https://codepen.io/mikeK/pen/LYNNXgd?editors=1010 Happy drawing ... Mikel
-
Hey @JdF, Welcome to the GreenSock Forum. Here some random mania: https://codepen.io/mikeK/pen/xvygbQ Happy tweening ... Mikel
-
SplitText and Stagger - Illusion of curving text around a sphere
mikel replied to Sonya.Ninja's topic in GSAP
https://codepen.io/mikeK/pen/YzqqYVo Sorry - no tutorial. Happy curving ... Mikel -
SplitText and Stagger - Illusion of curving text around a sphere
mikel replied to Sonya.Ninja's topic in GSAP
Hey @Sonya.Ninja, Staggering the scale of a split text horizontally is not that easy (spacing of the words). Here's just a try with two stagger tweens https://codepen.io/mikeK/pen/eYZZRzZ @PointC has a super vertical solution: an overlap repeating loop https://codepen.io/mikeK/pen/JjXXJKJ But ZACH definitely has something else in the quiver ... Happy scrolling for a better world ... Mikel -
Hey @jiggy1965, Do you expect this to happen? https://codepen.io/mikeK/pen/bce8f78fe20cd9b66ae29c588dae4c4f A CodePen would have been nice. Happy tweening ... Mikel
-
Hey @atulraj89, The devil is in the details: delete line 25 (its the same as line 19). Happy morphing ... Mikel
-
Hey @Destrovi, Welcome to the GreenSock Forum. Please take a look at the new GSAP scrollTrigger. With the help of this tool I would pin the entire page (#pageWrap) and scrub the animation So the user sees an activity when he scrolls. https://codepen.io/mikeK/pen/xxVbNLP An alternative: no scrubbing, but only once https://codepen.io/mikeK/pen/mdPyYYZ Happy scrolling ... Mikel
-
ScrollTrigger Reverse after morphing using another timeline
mikel replied to hamsa@thoughtput.in's topic in GSAP
Hey @hamsa@thoughtput.in, You could e.g. use a function with the relevant params. This can then be called with the corresponding callbacks (onEnter, onLeave, onEnterBack, onLeaveBack, ...) - and also for the click func. https://codepen.io/mikeK/pen/bGpNYoR Happy switching ... Mikel EdiT: I also changed the SVG: you might like the morph -
... and sponsored by Volkswagen.
-
Looking for ScrollTrigger equivalent to ScrollMagic's reverse: false
mikel replied to selvinkuik's topic in GSAP
Hey @selvinkuik, Sorry for my snappy answer - I didn't read your first post with concentration. Could have understood your intention. The example visualized in the CodePen then also helps me on the jumps. Here just for fun https://codepen.io/mikeK/pen/qBZBzje Happy tweening ... Mikel -
Looking for ScrollTrigger equivalent to ScrollMagic's reverse: false
mikel replied to selvinkuik's topic in GSAP
Hey @selvinkuik, You could also study the DOCs and e.g. keep an eye on toggleActions. toggleActions String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none". Happy scrolling ... Mikel -
Hey @samuelhigginson, A 'ease:' power2.out 'stops the animation at the end and the transition is therefore not as you want it to be. So one way would be just one tween with ease: 'power2.inOut' https://codepen.io/mikeK/pen/OJNJywz Where is the music ... Mikel
-
As a fan of random animations I would say that is excellent. Thank you
-
Hey @Yaya, Hmmm - that is only a quick and dirty. You can also position the wings differently and try out suitable rotations.
-
Hey @Yaya, If this is a hummingbird, I would just let the wings 'rotate' quickly. https://codepen.io/mikeK/pen/mdPbWvg?editors=1010 Happy flying ... Mikel
-
Hey @Violetta, If you're already loading GSAP plus GSAP scrollTrigger, why use CSS transitions for that animation? Why not do it with GSAP instead? It'll give you more fine control over the animation. https://codepen.io/mikeK/pen/KKzPNbQ Happy batching ... Mikel