Jump to content
GreenSock

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

DigitalCardinal

ShockinglyGreen
  • Posts

    11
  • Joined

  • Last visited

Posts posted by DigitalCardinal

  1. 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);
    		});

     

  2. @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.

     

    See the Pen axxRge by DigitalCardinal (@DigitalCardinal) on CodePen

  3. @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.

  4. 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);}
    		});

     

×