Jump to content
GreenSock

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

Blake's new speed and motion pen

Recommended Posts

Hey Everyone :),

 

Do yourself a favor and look at Blake's new speed and motion pen - absolutely amazing!

 

@Blake - you probably don't want to self promote on the forum, but your new pen is one of the coolest demos I've seen in a long time so I'm doing this for you. So cool! :)

See the Pen XXbLer by osublake (@osublake) on CodePen

  • Like 7
Link to comment
Share on other sites

Yes indeed. Blake is a rock star. Folks can learn a lot from looking at his work. We're privileged to have him so active in the GSAP community here. 

 

Challenge: see if you can formulate an animation-related question that will stump Blake. :)

 

I've also got to give a shout out to Diaco, Jonathan, and PointC for their contributions as well. Tahir Ahmed and Dipscom have been coming on strong lately too. Of course Carl is a perennial forums studmuffin.

 

Great work guys. I love seeing everybody sharing creative solutions and encouraging each other. 

  • Like 5
Link to comment
Share on other sites

Thanks!

 

I've actually been sitting on that demo for a couple months now and kind of forgot about it. But yesterday Carl brought it up, so I decided to dust it off and make it new again.

 

I've never seen any animations done like that before, but it's so obvious now. And this cannot be unseen. So this has gotten me thinking about physics based motion paths, which I think would be an awesome plugin! And having events tied to certain conditions would be even better. That's what I did with the stall speed. When the jet falls below a certain speed I tell it to do a "barrel roll". This always happens at the top of a loop, making it seem like it just got speed boost from the roll. 

 

BTW, stumping me is real easy. Just ask me how to animate something with CSS, and I'll just look at you stupid. Ask me how to animate something with SASS, and I'll look at you even stupider. Never could get the hang of the syntax and rules. It always makes me feel like I'm trying to cross a 10ft gap with 2 5ft boards.

  • Like 4
Link to comment
Share on other sites

It always makes me feel like I'm trying to cross a 10ft gap with 2 5ft boards.

Isn't that the truth.  :-P

 

Last week, (for some strange reason) I tried a quick CSS opacity animation and then tried to add a couple more things which led to "Duh! I can't sequence these things!"

 

Using any CSS animations now just makes me feel dirty and ashamed.  :P

  • Like 1
Link to comment
Share on other sites

Haha! You should feel dirty and ashamed. But don't worry, Diaco did something even worse in this thread. He combined CSS transitions with GSAP!  :-o

 

According to Carl, this is a serious crime with severe punishments, so Rodrigo came up with this for his unholy sin...

 

xlwdcj.gif

  • Like 4
Link to comment
Share on other sites

Haha! That's a fitting punishment.  :-P

 

Trying any animation with CSS does make you truly appreciate the ease and elegance of GSAP.

 

I think there are two types of people in this world.

 

1. Those who think CSS animations are a good thing

2. Those who have tried GreenSock.

  • Like 3
Link to comment
Share on other sites

I think there are two types of people in this world.

 

1. Those who think CSS animations are a good thing

2. Those who have tried GreenSock.

 

Ha! What a great quote. ;)

  • Like 1
Link to comment
Share on other sites

Just coming across this.

 

Erm... Wow? 

 

On the CSS transition thingy: There is time and place for each. I do agree with not being great to sequence with.

 

Third point, how's that I am being lumped with the lot that knows their stuff? Flattered but, all I do is talk a lot. Not quite there in the answering correctly yet.

  • Like 1
Link to comment
Share on other sites

On the CSS transition thingy: There is time and place for each. I do agree with not being great to sequence with.

 

SMH. You and your banner mentality. The only acceptable answers are:

  • Before you started you using GSAP
  • To demonstrate why CSS animations are bad
  • Simple hover effects

Please read this totally unbiased blog post by Popmotion.  ;-)

https://popmotion.io/blog/8-unbiased-reasons-css-transitions-are-the-absolute-worst

 

  • Like 2
Link to comment
Share on other sites

Harsh Blake...

 

BUT you vindicated me with your own words.

 

3. Simple hover effects

 

 

And... Could someone enlighten me, what does SMH stands for? I need to figure out if I am being offended or complimented here.

 

:P

  • Like 1
Link to comment
Share on other sites

Shaking My Head :)

Link to comment
Share on other sites

I couldn't figure out what SMH meant the first couple of times I saw it. Sup my homie? Super Mario hater? Supersized McDonald's hashbrowns?

 

Here's a simpler version of the code if anybody wants to mess around with it. 

See the Pen LGpzBo by osublake (@osublake) on CodePen

 

Understanding how it works isn't that complicated. I first create a paused Bezier tween and then loop through its progress in 1000 steps. At each step I record a timeScale value based on the rotation of the element. So if the the rotation value is positive, I decrease the running timeScale value. If the rotation is negative I do the opposite. When the tween is playing, I just update the timeScale to a value I recorded earlier, which is based on the tween's current progress.

 

It's not the most accurate way of simulating gravity, but it works. If I was going to make another version, I would probably just create a custom ease function that would keep track of the velocity and rotation, and then I could just apply gravity in the set method.

  • Like 4
Link to comment
Share on other sites

...makes me feel like I'm trying to cross a 10ft gap with 2 5ft boards.

I wish I had more time to study your examples Blake, but I used to be a woodworker, so I can help with this.

What you do is place the first board with 8 inches on the ground, then carry the second board out to the end of it and reach as far as you can and place it so it has about 8 inches on the ground on the other side.  Then just hop across and walk to the other side.

  • Like 4
Link to comment
Share on other sites

Lol. Although I don't know if I'd trust 8 inches. Especially if we are talking about a gap like in a Road Runner cartoon. Too risky.

 

HZ5EglY.png

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