Jump to content
GreenSock

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

Updating from v.2 to v.3

Recommended Posts

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

});

 

Link to post
Share on other sites

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.

  • Like 2
  • Thanks 1
Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

 

12 minutes ago, benjino said:

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

Correct :) 

  • Thanks 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×