Jump to content
Search Community

Trying to get my head around what's happening here;

SpaceMoney-01011000 test
Moderator Tag

Recommended Posts

Greetings and salutations!

I'm looking over nested timelines using the aforementioned Codepen example, and I'm trying to figure out what's going on in the code because I'm not sure what's being affected or why;
 

var master = gsap.timeline({repeat: -1});
master.add(createPanel(".panel1"))
.add(createPanel(".panel2"))
.add(createPanel(".panel3"));

I kind of get the gist of what's happening insofar as the timeline function is being passed off to the 'master' variable. What I'm not too sure of is why the classes of .panel1, .panel2, or .panel3 are being .added in there, or what effect the code is having on them - as they are empty classes.

Anyone feel like helping me understand this? I'm just getting familiar with GSAP and JS in general, so I'm a little perplexed as to how to interpret what I'm reading.

Kind regards,

SpaceMonkey-X. 

See the Pen yLNqOVd by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

HI.

 

This is what we refer to as "functions that create and return timelines". You'll notice each panel has the same animation.

The createPanel() function takes in a panel class as a parameter. The function then creates a timeline that animates a bunch of elements in that panel. That timeline is then inserted into the master timeline.

 

Another way to put it is "the master timeline is adding the animation that is created and returned by the createPanel() function when we call it and pass in a particular panel."

 

This is a very powerful technique when you want to do similar things to multiple items. 

 

If you're interested I have a complete, multi-part video tutorial teaching how to build something like this step-by-step from the ground up in my course GSAP 3 Beyond the Basics.

 

 

  • Like 2
Link to comment
Share on other sites

13 minutes ago, Carl said:

HI.

 

This is what we refer to as "functions that create and return timelines". You'll notice each panel has the same animation.

The createPanel() function takes in a panel class as a parameter. The function then creates a timeline that animates a bunch of elements in that panel. That timeline is then inserted into the master timeline.

 

Another way to put it is "the master timeline is adding the animation that is created and returned by the createPanel() function when we call it and pass in a particular panel."

 

This is a very powerful technique when you want to do similar things to multiple items. 

 

If you're interested I have a complete, multi-part video tutorial teaching how to build something like this step-by-step from the ground up in my course GSAP 3 Beyond the Basics.

 

 


I understand what it's doing overall, but I'm still not sure what it's doing specifically with the.panel1,.panel2 and.panel3 classes as there's no discernable styling associated with them -  they're just empty classes in the markup.

I mean, if there's no color, no dimension or anything else; what's happening to them? Why are they there?

Link to comment
Share on other sites

.panel1, .panel2, and .panel3 are used as unique selectors to select the panel that will be animated. 

 

inside the function those selector strings are used to dynamically select child elements

 

function createPanel(panel) {
  var tl = gsap.timeline();
  tl.from(panel + " .bg", {duration: 0.4, scale: 0, ease: "power1.inOut"})

 

when you call createPanel(".panel1") then the first tween in the timeline shown above will use the target selector ".panel1 .bg" which will scale the background element in .panel1

 

when call createPanel(".panel2") then the next timeline animates ".panel2 .bg" and so on. 

 

This is how all 3 panels get the same animation.

 

Make sense?

 

 

 

 

  • Like 2
Link to comment
Share on other sites

35 minutes ago, SpaceMoney-01011000 said:

I mean, if there's no color, no dimension or anything else; what's happening to them?

 

The panels do have styles. Notice in addition to .panel1, 2, 3 they all have a class of .panel which has this in the CSS:

 

.panel { width: 300px; height: 250px; display: inline-block; background: black; position: relative; overflow: hidden; }

 

  • Like 2
Link to comment
Share on other sites

1 hour ago, Carl said:

.panel1, .panel2, and .panel3 are used as unique selectors to select the panel that will be animated. 

 

inside the function those selector strings are used to dynamically select child elements

 


function createPanel(panel) {
  var tl = gsap.timeline();
  tl.from(panel + " .bg", {duration: 0.4, scale: 0, ease: "power1.inOut"})

 

when you call createPanel(".panel1") then the first tween in the timeline shown above will use the target selector ".panel1 .bg" which will scale the background element in .panel1

 

when call createPanel(".panel2") then the next timeline animates ".panel2 .bg" and so on. 

 

This is how all 3 panels get the same animation.

 

Make sense?

 

 

 

 

Ah! Yes! Make sense now. Thank you.

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