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
-
Hey Zach, Here is a test: hyphens: auto; text-align: justify; https://codepen.io/mikeK/pen/KKVJZZr
-
Hey @AssaSSAins, Instead of display: none you can use visibility: hidden in your CSS. And then ... autoAlpha Identical to opacity except that when the value hits 0 the visibility property will be set to hidden in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to inherit. It is not set to visible in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that’s probably not what was intended). And for convenience, if the element’s visibility is initially set to hidden and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your CSS visibility: hidden) and then fade them in whenever you want. //fade out and set visibility:hidden gsap.to(element, { duration: 2, autoAlpha: 0 }); //in 2 seconds, fade back in with visibility:visible gsap.to(element, {duration: 2, autoAlpha: 1, delay: 2}); Happy tweening ... Mikel
-
Hey @atulraj89, Another option: You can also use a mix of morphs and moves and two overlays to cover the clipPath. https://codepen.io/mikeK/pen/KKVbzmz Happy tweening ... Mikel
-
Dot scroll the next section ScrollTrigger (or scrollMagic)
mikel replied to Mary Pieroszkiewicz's topic in GSAP
Hey @Mary Pieroszkiewicz, Maybe a little tricky - use two separate dots that 'crossfade' and you reach the desired positions. https://codepen.io/mikeK/pen/jOWXXQo Scaling the second dot is not the best solution. Better an SVG here too. Happy scrolling ... Mikel -
Hey @Nima_general, Please provide a minimal demo in CodePen so that we can see things in context. We'd be happy to help, but it's tough without any demo. Happy tweening ... Mikel
- 1 reply
-
- 2
-
Hey @Alexandra Spalato, In the example you want to recreate, it is not the whole logo that rotates, but the individual parts 'move' to their new position. https://codepen.io/mikeK/pen/PoZxpEy By the way: Please check your Understanding the Position parameter. Happy tweening ... Mikel
-
Hey @Alexandra Spalato, You have not defined a class 'anim'. If you want to round the corners of an svg element, you need a rect element defining the attributes rx and ry. Or do it like this https://codepen.io/mikeK/pen/BajqerK?editors=0110 Happy tweening ... Mikel
-
Hey @mvaneijgen, Take a look at these explanations Happy snapping ... Mikel
-
Hey @df257666, Special ease for entire timeline - tween the timeline ... Here an example https://codepen.io/mikeK/pen/RwNKBrB Happy easing ... Mikel
-
Have An Animation Animate Out 'onLeaveBack' with Scroll Trigger
mikel replied to emilychews's topic in GSAP
Hey @emilychews, 'Play' with all variables - for example https://codepen.io/mikeK/pen/QWymeMa Happy scrolling ... Mikel -
Because it's so beautiful and fun ... https://codepen.io/mikeK/pen/xvygbQ
-
Hey @wuergeengel, Welcome to the GreenSock Forum. Here an example for a random loop https://codepen.io/mikeK/pen/gVBLME Happy looping ... Mikel
-
Hey @ooxablon, Year, take a look at the doc, the video and the many examples and you will see how easy GSAP scrollTrigger does your animation. Happy scrolling ... Mikel
- 4 replies
-
- 2
-
- slideshow
- scrollmagic
-
(and 1 more)
Tagged with:
-
Hey @Lichay, You could also study the DOCs from the new GSAP scrollTrigger.
-
Hey @redfawx, Just small suggestions ... https://codepen.io/mikeK/pen/oNXoOBq https://codepen.io/mikeK/pen/a268f68810ba894fdc72bf966d7be862?editors=1010 Happy scrolling ... Mikel
-
Hey @ooxablon, Welcome to the GreenSock Forum. Take a look at the new GSAP scrollTrigger. https://codepen.io/GreenSock/pen/eYpOZvX Happy scrolling ... Mikel
- 4 replies
-
- 3
-
- slideshow
- scrollmagic
-
(and 1 more)
Tagged with:
-
Scroll animation "collision" using scrolltrigger with scrub and pinning
mikel replied to kristoffer's topic in GSAP
end: "+=100%" -> height:100vh; of each step -
Hey @heavylifting, I believe it is still a technical aspect of how you build the path. https://codepen.io/mikeK/pen/GRoyPYx
-
Hey @Baret, The layer id = "layer4" prevents you from doing this. Either delete or place it differently. You can use SVGOMG to 'clean' your svg.
-
Hey Carl, If you bought a few TESLA shares a few months ago and traced the upcoming TESLA pickup, it would be an easier option: simple shape and good value today.
-
Hey Carl, It was just fun. Did you the illustration?
-
Hey Carl, Is that an American car? Kind regards ... Mikel
-
Hey @heavylifting, Your paths are - as I see it - not entirely 'clean'. https://codepen.io/mikeK/pen/ExPoPON
-
Hey @Sympozium, Here is an example with two variants https://codepen.io/mikeK/pen/gOPoPeK?editors=1010 Happy scrolling ... Mikel