
shMattyP93
Members-
Posts
12 -
Joined
-
Last visited
Recent Profile Visitors
The recent visitors block is disabled and is not being shown to other users.
shMattyP93's Achievements
4
Reputation
-
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
shMattyP93 replied to shMattyP93's topic in GSAP
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
shMattyP93 replied to shMattyP93's topic in GSAP
https://codepen.io/shMattyP93/pen/XWmOprm 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
shMattyP93 replied to shMattyP93's topic in GSAP
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?