Jump to content
Search Community

GSAP TweenMax staggerFrom in WordPress

benjino test
Moderator Tag

Go to solution Solved by benjino,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

add_action( 'wp_enqueue_scripts', 'centric_enqueue_home_scripts' );
/**
 * Enqueue Scripts
 */
function centric_enqueue_home_scripts() {

	wp_enqueue_script( 'homeintro', get_stylesheet_directory_uri() . '/js/homeintro.js', array( 'jquery' ), '1.0.0', true );
 	
} 

Here's what I have for enqueueing the the javascript.

 

I am using a Genesis theme and have installed the following in the theme setting's wp footer:

<!--CDN link for the latest TweenMax-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

See the Pen gpRLEo by benjino (@benjino) on CodePen

Link to comment
Share on other sites

I have it working and each one comes in staggered as I want, but all three remain. I want the first one to disappear right before the second one comes in. How would I get the first ID to come in but then disappear completely and be replaced by the second, and then the third comes in below it, and those last two remain?

  • Like 2
Link to comment
Share on other sites

Well this is what I'm trying to figure out. Have any clues as to where on Greensock I can look for clues?

jQuery(document).ready(function($){
	window.onload = function()
	{
	
	var tl = new TimelineLite();
	
	tl.from("#intro1", 2, {scale:0.5, autoAlpha:0}, 2)
		  tl.staggerFrom("#intro2, #intro3", 2, {delay:1, scale:0.5, autoAlpha:0}, 6);
		  
	  }

});

 

Here's my HTML

<h1 id="intro1">first bit of text</h1>

<h1 id="intro2">second bit of text</h1>

<p id="intro3">third bit of text</p>
Link to comment
Share on other sites

Sort of. #redbox would come in from a scale of 0.5 like the other two. It sort of does that but the text container is still there and pushes down bluebox and greenbox. I need the redbox to go away completely and be replaced by bluebox and greenbox. Not like visibility:hidden, but like display: none so the container goes away and doesn't push down the other two containers.

 

Something a little more like this though but redbox's container needs to not be hidden, pushing down the other two:

var tl = new TimelineLite()
		//bring in first item and then have it disappear
		tl.from("#intro1", 1, {scale:0.5, autoAlpha:0, repeat:1, delay:2, repeatDelay:0.9, yoyo:true})
		
		//stagger in next 2 and have them remain
		.staggerFrom("#intro2, #intro3",  1, {autoAlpha:0}, 1)
		  
	}
Link to comment
Share on other sites

I'm liking this more, but how is it that the pen you shared is doing the same thing without the ".set" ?

 

Also, when the page loads all of the elements are there briefly, then disappear, then do the timeline sequence. It needs to be blank and then start.

var tl = new TimelineLite()
		//bring in first item and then have it disappear
		tl.from("#intro1", 1, {delay:2, scale:0.5, autoAlpha:0, repeat:1, repeatDelay:0.9, yoyo:true})
		
		.set("#intro1", {display:"none"})
		
		//stagger in next 2 and have them remain
		.staggerFrom("#intro2, #intro3",  1, {autoAlpha:0}, 1)
Link to comment
Share on other sites

I'm liking this more, but how is it that the pen you shared is doing the same thing without the ".set" ?

 

I gave the #redBox (first item) position:absolute in the css

 

To get rid of the blinking I would suggest hiding all the elements with visibility:hidden so that they are not visible as soon as the page first renders (before js loads and executes). when the js kicks in immediately set the visibility to visible.

 

pls see updated pen http://codepen.io/GreenSock/pen/JdJWJa?editors=011

Link to comment
Share on other sites

Right now I have this but will probably play around with things until I get timings just the way I want it. Thanks so much Carl.

 

For those not seeing it all, go to the codepen link and see that a container div was wrapped around the other three, and given visibility:hidden in CSS. Tweenlite.set makes it visible after the page loads.

jQuery(document).ready(function($){
	window.onload = function()
	{
	
		//when js kicks in show the .demo
		TweenLite.set(".homeintro", {visibility:"visible"})
		
		var tl = new TimelineLite()
		
		//bring in first item and then have it disappear
		tl.from("#intro1", 1, {delay:2, scale:0.5, autoAlpha:0, repeat:1, repeatDelay:5, yoyo:true})
		
		.set("#intro1", {display:"none"})
		
		//stagger in next 2 and have them remain
		.staggerFrom("#intro2, #intro3",  1, {delay:1, autoAlpha:0}, 3)
		  
	}

}); 
Link to comment
Share on other sites

The last block of text comes in and below it is button trigger that causes the page to scroll down to the next section. The button container has a class of .arrow and needs to staggerFrom right after #intro3. I am guessing I need to treat it like #intro1, giving it visibility: hidden in CSS and then do the opposite in javascript. ".arrow" is in a short container below the widget-container that holds #intro1, 2 and 3. I tried a few things and couldn't get it to work.

Link to comment
Share on other sites

I think I may be catching on. This worked. The only thing I don't like about the setup is that it causes the page to jump a little because I'm hiding and displaying dom elements. Is there a way around this doing what I'm doing here other than using Flash?

jQuery(document).ready(function($){
	window.onload = function()
	{
	
		//when js kicks in show the .demo
		TweenLite.set(".homeintro, .arrow", {visibility:"visible"})
		
		var tl = new TimelineLite()
		
		//bring in first item and then have it disappear
		tl.from("#intro1", 1, {delay:0.8, scale:0.5, autoAlpha:0, repeat:1, repeatDelay:3, yoyo:true})
		
		.set("#intro1", {display:"none"})
		
		//stagger in next 2 and have them remain
		.staggerFrom("#intro2, #intro3, .arrow",  1, {delay:0.5, scale:0.5, autoAlpha:0}, 3)
		  
	}

});
Link to comment
Share on other sites

It sounds like the solution is going to be in your CSS and how you plan to construct the HTML / DOM.  I'm certain you do not need to resort to using Flash for something like this. It's really hard to advise how to fix that problem without seeing the CSS, HTML and JS which is why we suggest you create a CodePen demo:

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

I think you will find it to be a great prototyping tool and it will help you get support when you need it.

Link to comment
Share on other sites

Sorry, there isn't much we can do looking at the WordPress site :( 

Just to clarify, we don't need to look at the exact production code with all your real images and css, you would just need to create a demo that replicates the same behavior with those 3 tweens in your timeline. 90% of the time just the act of building the demo reveals the issue as you are only working with the code that is necessary. Once you have something that works it makes it much easier to go into WordPress and fix what you have to.

Just my 2 cents.

  • Like 1
Link to comment
Share on other sites

I got it to work the way I want by doing some tricky swapping and alternating of display and visibility rules. Now there is no jump in the page section, it just flows from one to the other. Do you see a more efficient way to write this javascript than what I have done?

 

I also tried it with recoding the HTML, putting both h1 elements into one h1 and instead giving each a unique span id. But doing this caused the 'scale:0.5' attribute to not work, instead causing a nice fade in/fade out transition, so I brought the HTML back to what it was with two h1 elements. I'm not sure having two h1 elements there is good for SEO, would you happen to know about that?

 

See pen: 

Link to comment
Share on other sites

Glad you got it working. The demo is certainly helpful.

 

I think I would have structured the html a little differently

 

<div class="homeintro">
    <div class="panel" id="panel1">
        <h1 id="intro1">1st intro bit of text</h1>
    </div>
    <div class="panel" id="panel2">
        <h1 id="intro2">2nd intro bit of text</h1>
        <p id="intro3">Change a character in each of the IDs above to see the text show on the screen. This is the third intro bit of text which is a paragraph that has many more words than a headline element, making it more substantial of a block level element affecting height when in reference to displaying or not displaying it along with #intro2,
          as in display: block and display: none. With this javascript we have a swapping of "block" and "none" with the selector "display." Without this display rule swapping all block level elements remain as visbility:hidden/visible, effectively causing
          the page or page section to jump as elements are visible or hidden. Swapping by display:block/none allows for a constant page section height as each block level element contributes to the height of the section. Overall, this only works if both
          header elements wind up being the same height due to their number of characters.</p>
    </div>      
</div>
 
This way you don't have to worry about anything in panel1 messing with the flow of elements in panel2.
Use GSAP to show panel1 > hide panel 1 > show panel 2 > stagger in elements in panel2
 
I don't know all the aspects of how this needs to work and I'm not saying this is better, its just the way I see it.
 
--
 
I don't think 2 <h1> tags will kill SEO but that's not really my area of expertise.
Link to comment
Share on other sites

  • Solution

I like your HTML suggestions. I finally did it this way.

<div class="homeintro">
<header id="intro1">
<h1>1st intro bit of text</h1>
</header>
<article>
<h1 id="intro2">2nd intro bit of text</h1>
<p id="intro3">Change a character in each of the IDs above to see the text show on the screen. This is the third intro bit of text which is a paragraph that has many more words than a headline element, making it more substantial of a block level element affecting height when in reference to displaying or not displaying it along with #intro2,
as in display: block and display: none. With this javascript we have a swapping of "block" and "none" with the selector "display." Without this display rule swapping all block level elements remain as visbility:hidden/visible, effectively causing
the page or page section to jump as elements are visible or hidden. Swapping by display:block/none allows for a constant page section height as each block level element contributes to the height of the section. Overall, this only works if both
header elements wind up being the same height due to their number of characters.</p>
</article>
</div>
jQuery(document).ready(function($){
    window.onload = function()
    {
    
        //when js kicks in show
        TweenLite.set(".homeintro, .arrow", {visibility:"visible"})
        
        var tl = new TimelineLite()
        
        .set("#intro1", {display:"block"})
        
        //bring in first item and then have it disappear
        tl.from("#intro1", 1, {delay:0.8, scale:0.5, autoAlpha:0, repeat:1, repeatDelay:3, yoyo:true})
        
        //swap one for the other to avoid page jump
        .set("#intro1", {display:"none"})
        .set("#intro2", {display:"block"})
        
        //stagger in next 3 and have them remain
        .staggerFrom("#intro2, #intro3, .arrow", 1, {delay:0.5, scale:0.5, autoAlpha:0}, 3)
        
    }

}); 

See pen: 

Link to comment
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.
×
×
  • Create New...