Brand New and Loving it! A question...

[Jim Nayzium]

A little introduction:

Forgive my ignorance as I fly through all these tutorials! LOVING this universe so far! I was an old Macromedia Coder back in Actionscript 2.0 and used to make complex-crazy-overkill-ALL-with-super-annoying-sound-effects-on-every-rollover websites back in 2001-2006 and then changed careers and still dabble with coding projects now and then. I have been searching for something that would operate like my old Flash mind was used to operating and this is by far the best experience I have had. I realize the new world of HTML5 and things like GSAP are way way better and more useful than SWF files were! But still, as a novice coder with PHP, MYSQL, and jQuery/Javascript, who used to default to doing EVERYTHING in FLASH, this is like the good Lord has finally answered my prayers! 

 

KUDOS to the development team.

 

I joined for the Business level just to pay you guys more. I don't know if my projects will ever truly get off the ground but maybe they will one day!!

 

As odd as this will sound, I actually have spent the last fifteen years doing stand-up comedy! I know right? A coder who does stand-up. Well I will add more to the mix. I was a football coach and head drama instructor at a high school for ten years before any of this! I did my school's website in pure HTML right as CSS became a thing and no other schools had websites at the time so it was cutting edge!   The first time I applied a class to a title on a page and it applied to every title on the site, my board literally GASPED. HAHAHA. Of course it was just a vomited plate of spaghetti code interweaving table tags with non-optimized high rez jpg team photos (which loaded 10 to a page no less) for each sports team. HAHAHAH!

 

Anyway, I then started doing stand-up comedy full time in the mid-aughts, and never looked back. However, I maintained some website work as I started stand-up just to pay the bills, as my company I started while teaching (which did NFL Films-ish Highlight video for colleges and high schools also started doing complex FLASH websites for my clients!) So, as I transitioned to comedy full-time I kept coding the occasional project and let my old clients continue to pay me.

 

All that to say, I am in heaven with this GSAP!!

 

SO HERE IS MY QUESTION:  

 

When I apply a basic gsap.to(element, { object } );

Can someone explain this to me in simple, 5th grade terminology please.

If I want to apply two different sets of gsap.to iterations to an element, and time them correctly to overlap and fire at the right time, what is the best way to go about that? 

 

Let's pretend I want to make a bunch of stuff happen to an array of objects and that will take "duration: 5" to occur.

 

But at the 4 second mark, I want ALL THOSE SAME objects to start spinning "rotate:720" for 1 second, which will be the last second of the original 5 second animation.

 

So below is my current attempt, but the "blaster" effect fires at the same time as the original Physics2D and it all happens at the same time.

 

What I want to happen is for the fountain to shoot up for 4 seconds applying its gravity setting etc.... THEN as it crosses the 4 second threshold, no matter where the falling dots are on the screen, they then get the BLASTER effect applied to them and that effect executes for the remaining ONE second.

 

I realize the timeline is probably my friend here, but I have not fully understood the timeline code yet, so if I am using it below it's BY ACCIDENT. The fountain PHYSICS effect I want didn't seem to utilize the timeline animation concept, so I wanted to use my old Flash brain and just grab them all as it happened at the four second mark... Maybe I am way off here, but I felt like I was super close.

 

Feel free to bust chops and make fun of any of my egregious mistakes. AND THANKS for anyone helping out.

 

// Create my saved effect to apply later
// register the effect with GSAP:
gsap.registerEffect({
    name: "blaster", 
    effect: (targets, config) => {
        return gsap.to(targets, {
          duration: config.duration, 
          opacity: 0,
          scale: config.scale,
          rotate: config.rotate
        });
    }, 
    defaults: {
      duration: 2,
      scale:1.5,
      rotate:135
    }, //defaults get applied to any "config" object passed to the effect
    extendTimeline: true, 
});

// using the dots array from other tutorials
for (i = 0; i < 10; i++) {
	dot = document.createElement("div");
	dot.setAttribute("class", "dot");
	bg.appendChild(dot);
	dots.push(dot);
}

// fountain of dots pull directly from tutorial on GSAP about PHYSICS2D
let tween = gsap.to(dots, {
		duration: 5,
		physics2D: {
			velocity: "random(900, 1200)",
			angle: "random(-85,-100)",
			gravity: 500 
		},
		delay: "random(0, 3)" 
	});


// Put a blaster effect on to each "dot"  in the array
// and apply the options to them from the blaster object created inside the loop
// then have those go off 4 seconds into the animation, right?
dots.forEach(function(element) {
	gsap.effects.blaster(element, {
    	duration: 5,
    	scale:"random(1,2)",
    	rotate:"random(0,720)",
    	delay: 4  ///// <-- This is where I want the blaster to occur in my brain???? 
  	});
});

 

 

 

 

 

 

See the Pen xxgvdyM by JimNayzium (@JimNayzium) on CodePen

[Cassie]

Hi there Jim.

I loved your intro. So happy to have you here. Welcome!

You're right, timelines are what you need. Luckily for you, refactoring tweens into timelines is as easy as creating a timeline.

let tl = gsap.timeline()

and then adding your tweens to that timeline by changing gsap.to totl.to

I've refactored your code to make this into a timeline and got rid of the foreach loop as you can just pass GSAP the dots array directly, let me know if you have any questions, happy to help!

See the Pen 1ae233b46802682440f3a8de7fd6ea95?editors=1010 by cassie-codes (@cassie-codes) on CodePen

[Cassie]

Oh, I forgot to add this too, apologies.
 

The position parameter is the magic behind ordering tweens and positioning them on a timeline.

Happy tweening!

[Jim Nayzium]

THIS IS insanely wonderful! And thanks for reading the intro! I realize it's long winded! hahaha. I will take a look at the code when I get back to the computer this afternoon but watching your codepen it's 100% a homerun perfect for what I wanted to achieve, so I am sure it will make sense when I see it. Hoping this stuff starts to click (like I am fairly sure it will!!)

[Jim Nayzium]

Okay, I lied. I took a look at the code while on my errands in the car! hahahah -- So, chaining the dots array to the already established TL variable is what makes it run sequentially? So I was wrong in assuming that I needed to do a bunch of math in my head to figure out when to trigger things like duration of 5 in both and delay of 4 in one type math. Right? I was wrong to assume that was neccessary! That's great news.

 

Also, as I look at the code, is it the TIMELINE that makes it all work or is it simply the chaining the next set of effects to the dots variable?

 

I am curious if all you had done was chain it together what it would then look like? Or is the timeline plugin what makes it all stay linear no matter what? (Which would make sense, hence the name "timeline"

[GreenSock]

1 hour ago, Jim Nayzium said:

LOVING this universe so far! I was an old Macromedia Coder back in Actionscript 2.0

Welcome! It's always nice to hear from a fellow ex-AS2 coder I remember those days fondly, but I'm very glad we're past them now. The open web is a pretty cool place to be these days. 

 

@Cassie gave you excellent advice. Once you wrap your head around timelines, it's a total game-changer. And really, they're not difficult to get accustomed to. Think of them as just a container for tweens, where you can place the tweens at certain spots on the timeline using the position parameter. By default, tweens just get sequenced one-after-the-other on a timeline, but the position parameter lets you have total control over positioning. 

 

If the docs aren't quite clicking, I'd strongly recommend checking out @Carl's video course. He's excellent at explaining this stuff visually. Seriously, once you grasp timelines, it'll totally change the way you animate. They can solve a lot of challenges you may be facing. 

[Cassie]

Oh, I just remembered that I made this little demo a while back.

It may help to wrap your head around the position parameter! Take a look at the docs and then add different position parameter values into the demo timeline code. 😊

See the Pen yLgmZzX by cassie-codes (@cassie-codes) on CodePen