en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en de en en fr en en ca en en en en en en en en en en fr en en en en en en en en en en fr en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en es en nl en es en en en en en en en en en it en en en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
I've read other threads and it seems this is possible to morph the ClipPath. However, the issue people have is with properly targeting the Paths and such. I've tried so many variations, but the Shape isn't morphing.
Using Scroll to control MorphSVG
DigitalCardinal replied to DigitalCardinal's topic in GSAP
@PointC looks like I had my order of operations incorrect. Got it working. Thanks so much for the help! Everything is working great now. Fantastic support!
Huge thanks to everyone, @mikel, @PointC I have the timeline part working. Now wrapping up the loop. I'm close, but have a syntax error. $(".entry-content").each(function(i) { let target1 = $(this).find(".clientsMask"); var darkMask = new TimelineMax(); darkMask.from(target1, 1, .setTween(TweenMax.to('.clientsMaskPath',3,{morphSVG: '.clientsMask2Path', ease: Power0.easeNone})) new ScrollMagic.Scene({ triggerElement: this, duration:'300', offset:'20%' }) .setTween(darkMask) .addTo(controller); });
Using Scroll to control MorphSVG
DigitalCardinal replied to DigitalCardinal's topic in GSAP
@PointC thanks. I'm getting really close. How would I run multiples of this? Meaning within my SVG I have multiple paths and I need them all to morph (the lines). Currently only the last entry is morphing. Also, is it possible to have this function for multiple instances of same class/morph on a page? Basically if I have an element I want to use over and over on a single page. Currently it only animates the first instance. EDIT***** I have them all working in the CodePen. Just curious if there is a cleaner way. Also still curious about multiple instances of same morph. https://codepen.io/DigitalCardinal/pen/axxRge
Using Scroll to control MorphSVG
DigitalCardinal replied to DigitalCardinal's topic in GSAP
@PointC not working for me.
Using Scroll to control MorphSVG
DigitalCardinal replied to DigitalCardinal's topic in GSAP
Trying to use @mikel's demo in my playground I'm stuck. What am I missing? https://codepen.io/DigitalCardinal/pen/LvvgZa
Using Scroll to control MorphSVG
DigitalCardinal replied to DigitalCardinal's topic in GSAP
Thanks to everyone ( @mikel @Rodrigo @PointC )!!! I guess my issue here is I am not familiar enough with how this all works to take what I have working and convert it to those examples.
Using Scroll to control MorphSVG
DigitalCardinal replied to DigitalCardinal's topic in GSAP
@mikel thank you so much for responding! This is a snippet of my project. I have it working on multiple svg "masks" on the homepage. The morph is triggered by scroll position just like you said. However the client is now asking if rather than just triggering it, can the morph be controlled back and forth with the scroll bar. Rather than triggering it and it runs completely, as the user scrolls down the animation moves forward/backward at the speed of the scroll. Much like the morph in @PointC's first Codepen, except backward and forward. I guess similar to Scrollmagic.
Using Scroll to control MorphSVG
DigitalCardinal replied to DigitalCardinal's topic in GSAP
Thanks @mikel and @PointC So I'm pretty newb on this. Any way to take the existing code and modify it to work? As I said I have this concept working on 5-6 different SVGs in my homepage. Each with different curved SVGs morphing. Here is a Codepen that shows what I'm trying to do. https://codepen.io/DigitalCardinal/pen/PgLaJm
Using Scroll to control MorphSVG
DigitalCardinal posted a topic in GSAP
So I have multiple morphs running on the same page. Currently they all work great, however the client has asked if the user can control the animation on scroll rather than simply triggering it. Being new to GS I'm a bit lost in this. Here is the code I was able to pull from elsewhere to get the animations working in their current state. How would I modify this to have the animation controlled by the scroll bar both up and down? var scrollMorph1 = new TimelineLite({paused:true}) .to("#headerBottomMask",1, {morphSVG:"#headerBottomMask2"},0) .to("#headerBottom01a",1, {morphSVG:"#headerBottom01b"},0) .to("#headerBottom02a",1, {morphSVG:"#headerBottom02b"},0) .to("#headerBottom03a",1, {morphSVG:"#headerBottom03b"},0) .to("#headerBottom04a",1, {morphSVG:"#headerBottom04b"},0) $(window).scroll(function() { var scrolled = $(window).scrollTop(); var diff = 20; if ($('#header h1').length > 0) { var object1 = $('#header h1'); var topOfRange1 = object1.offset().top + diff; } if (scrolled > topOfRange1 ) { scrollMorph1.play().timeScale(1); } else {scrollMorph1.reverse().timeScale(1);} });
“I’ve long felt like GSAP is the best kept secret in JavaScript.”
“I think I love GreenSock as much as bacon.”
“GSAP makes my job fun, because it allows me to focus on creating rich, engaging web experiences, while GSAP handles much of the implementation details behind the scenes.”
“Performance has been of paramount importance for GreenSock, so there is always peace of mind for us, developers.”
“Honestly think without TweenMax, I'd of changed careers by now; it's that good.”
“Aside from GreenSock’s laser-focused attention to detail, GSAP is fast, reliable, flexible, exceptional value (read: free in most cases) and, very importantly, supported.”
“@greensock is just pure awesomeness. What more can be said?”
“The best thing about GSAP is that it just works, and it works well. On every single browser I’ve tested.”
“GSAP and CSS Transitions: I've done both, and its like comparing an F16 to a horse. Take like 10 minutes to try.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.