[ScrollTrigger Start Before Section]

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?

[Auto Infinite Scroll Image Gallery]

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.

See the Pen dyVKvKj by akapowl (@akapowl) on CodePen

 

Thank you in advance for your assistance!

See the Pen qBYaEjg by MattyP93 (@MattyP93) on CodePen

[Reset Animation On Change of Index]

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!

[Firing a greensock animation when item has an active class]

8 hours ago, ZachSaucier said:

This is because you didn't pause the animation when you created it.

 

But your whole logic could be greatly simplified:

 

 

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?

[Firing a greensock animation when item has an active class]

13 hours ago, OSUblake said:

You can use .set() to put them in the correct spot. If you need the active to already be played, then set its animation .progress(1).

 

 

 

 

 

See the Pen XWmOprm by shMattyP93 (@shMattyP93) on CodePen

I must be missing something here as when the page loads the li's all move down

[Firing a greensock animation when item has an active class]

2 hours ago, OSUblake said:

Simple example. Box is an element, which is also an object. Which means you can add properties to it.

 

 

 

 

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

[Firing a greensock animation when item has an active class]

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

 

[Timeline within Master Timeline Start 1 second earlier]

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.

[Animating SVG in circular path]

Exactly what I was looking for, thank you!

[Animating SVG in circular path]

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. 

See the Pen jQmbYV by matt-pichola (@matt-pichola) on CodePen

[Animating stop-color of linearGradient]

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.

 

 

[Animating from a fill color to a gradient fill]

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

[Animating from a fill color to a gradient fill]

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!

[Animating from a fill color to a gradient fill]

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?

See the Pen oaKJqo by matt-pichola (@matt-pichola) on CodePen