shMattyP93

Is there any way to make a scrollTrigger event start earlier than defined? Currently, I have my event starting at the "top" of the section, is there any way to add say 150px to that so it starts slightly before the user actually scrolls to the start position?

Attached is the layout in which I would like to animate. There is a gallery of 8 images where only 4 are displayed at a time, but I'm using the extra 4 to create and infinite scrolling effect. I'm not exactly sure where to start with this as I've tried other ways that I have found in the Forums here but haven't had any luck. Here is what I would like to do, but with images. https://codepen.io/akapowl/pen/dyVKvKj Thank you in advance for your assistance!

I'm currently creating a site using pagePiling.js plugin, and firing animations depending on the index of the page. Is there a way I can reset an animation once the index changes so if the user goes backwards the animation will play again? This is the current simple code: if(index == 2){ scene1Tween.play(); } and here is something I thought would work but did not: if(index == 2){ scene1Tween.play(); }else{ scene1Tween.invalidate().restart(); } Thanks in advance for any assistance!

This is perfect, thank you so much!!! I have one more question which may be a bit far fetched... I'm using the pagePiling.js plugin, is there a way that I can say if the page anchor = #page-two for the navigation to move to page two?

https://codepen.io/shMattyP93/pen/XWmOprm I must be missing something here as when the page loads the li's all move down

This was super helpful and almost got exactly what I needed! But now all of my list items by default already already in the position set by the animation, y: 14, I need them all to start in their default spot. Thank you so much for your help

Basically I have a navigation with six items, and when clicked, they get an active class. Is there a way that I can play a a timeline if that class is active, and then reverse that timeline when the active class gets removed? This is the HTML for the navigation: <nav> <div id="navigation"> <ul id="navigation-ul"> <li id="button-1" class="active"><button>1</button></li> <li id="button-2"><button>2</button></li> <li id="button-3"><button>3</button></li> <li id="button-4"><button>4</button></li> <li id="button-5"><button>5</button></li> <li id="button-6"><button>6</button></li> </ul> <div id="outline"></div> </div> </nav> This is the function to add the active class: $('#navigation-ul').on('click', 'li', function() { $('#navigation-ul li.active').removeClass('active'); $(this).addClass('active'); }); And finally, here is the gsap animation: var navigationTwo = gsap.timeline({ paused: true }); navigationTwo.to("#button-2", { y: 14, delay: 0.5 });

Basically, I have a few timelines within my Master timeline, and I want one of them to start 1 second earlier to it is animating closer to the time of the one before it. masterTL.add( createLogo(), "logoLabel" ) .add( logoOut(), "outLabel") .add( speedometerIn(),"speedLabel") .add( mLogoIn(), "mLogoLabel") .add( clockIn(), "clockLabel") .add( musicIn(), "musicLabel") .add( volumeIn(), "volumeLabel") .add( drivingModesIn(), "drivingModesLabel") .add( dateTempIn(), "dateTempLabel") .add( fuelIn(), "fuelLabel") .add( carGearIn(), "carGearLabel") .add( driveGearIn(), "driveGearLabel"); Here is the code adding all of the timelines to the master timeline, I want the "volumeIn" timeline to start 1 second earlier. I've tried adding "-=1" in every spot and it doesn't make a difference anywhere.

Exactly what I was looking for, thank you!

I'm trying to animate the plane to follow the path of the dotted line and move it around the earth. I cannot use rotation because obviously that just animates it in place.

Hi, Is there a way I can animate the stop color values of a gradient using TweenMax, or in a timeline? <linearGradient x1=".258%" y1="49.75%" x2="101.258%" y2="49.75%" id="linearGradient-1"> <stop offset="1.281415e-03" style="stop-color:#FFDD15"/> <stop offset="0.5" style="stop-color:#EE4036"/> <stop offset="1" style="stop-color:#9E1F63"/> </linearGradient> I would like to animate those three colors to three new ones.

@PointC Thank you so much! Going to try and implement this now, really appreciate all the help here, still just learning this Greensock stuff so this has been very helpful.

So from my understanding, somewhere in the HTML I need to call the gradient that I will eventually fade into? Thank you all for your help and responses!

Is there a way that I can code an animation that animates a black fill color of an svg to fade into a gradient? Basically when the black circle enlarges and fills the screen, instead of the word becoming white I would like to fill it with a gradient across the entire word. Any ideas?