Updating from v.2 to v.3

[benjino]

I tried to update from v.2 to v.3 by swapping out "TweenLite" and "TweenMax" with "gsap" and changed the CDN load TweenMax.min.js script in the footer (WordPress) to the new CDN load gsap.min.js but that didn't work. I tried putting the new script at the bottom of the body tag to no avail. I thought all I needed to do to update what is animating is to update wherever I see TweenLite or TweenMax to gsap, and add the new script to footer, but I guess not. What am I missing?

 

Here's what I'm loading for the front-page of my site (https://siegfriedmedia.com). The animation is the stagger and drawsvg:

 

jQuery(document).ready(function($){

		// //when js kicks in show
		TweenLite.set("#drawsvg_content, .arrow", {visibility:"visible"})

		// sm_icon drawSVG
		TweenMax.fromTo("path", 1.75, {drawSVG:"50% 50%"}, {delay:1, drawSVG:"100% 0%", ease:Linear.easeNone});

		//stagger in next 3 and have them remain
		TweenMax.staggerFrom("#icon_behind, .home_intro, .arrow", 1, {delay:.3, autoAlpha:0, scale:.5, ease: Power4.easeOut, y: -150}, .2);

});

 

[ZachSaucier]

Hey benjino,

 

The only resource related to GSAP that I see being loaded by your page is https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js. Make sure to load GSAP 3 via the CDN: https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/gsap.min.js

 

You should also update your code to GSAP 3's format. Here's how I'd convert it:

 

jQuery(document).ready(function($){
	//when js kicks in show
	gsap.set("#drawsvg_content, .arrow", {visibility:"visible"})

	// sm_icon drawSVG
	gsap.fromTo("path", {drawSVG:"50% 50%"}, {duration:1.75, delay:1, drawSVG:"100% 0%", ease:"none"});

	//stagger in next 3 and have them remain
	gsap.from("#icon_behind, .home_intro, .arrow", {duration: 1, delay:.3, autoAlpha:0, scale:.5, ease: "power4", y: -150, stagger: 0.2});

});

Notice that staggers are now a part of every tween! So you don't have to use a specific method for staggers like staggerFrom.

[benjino]

I left it as it was working, and only posted my code and story (what I tried).

So are you saying I need both the TweenMax.min.js AND the gsap.min.js?

What I first tried was to remove TweenMax.min.js and add only gsap.min.js, AND updated the methods with "gsap" as you show. I was not updating the staggerFrom. My attempt at an update didn't work.

[benjino]

I got it, I see the changes. Much more efficient and logical, and we no longer need TweenMax.min.js because gsap.min.js has that now.

[ZachSaucier]

 

12 minutes ago, benjino said:

we no longer need TweenMax.min.js because gsap.min.js has that now.

Correct