Jump to content
Search Community

How have you used GreenSock?!

Shaun Gorneau test
Moderator Tag

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

So, last night I was listening to Jack's awesome interview with egghead.io (https://itunes.apple.com/us/podcast/egghead-io-instructor-chats/id1308497805#) and he started talking about all the unexpected uses of GSAP, and it got me thinking; what have I used GSAP for? And I realized the range is from pretty typical to not so typical!

 

My line of work is for a few large clients. So I've used GSAP on many projects; some externally facing (marketing sites) ... some for "exclusive" groups (targeted marketing), and many internally facing (for very specific groups ... members and employees).

 

So, for the typical stuff, it's

  • Immersive content
  • UI indicators and helpers
  • UX sauce

 

For the not so typical, it get's pretty varied pretty quick! But the one project that sticks out the most is GSAP as the heart of a frontend delivery system (backed by Drupal) that drives a community cable channel for a gated resort community in GA. The Drupal side allows content managers to create and place 3 types of media; image slideshows, video, and embedded (iframed) HTML. They have control over timings and transitions which map out to GSAP, background audio playlists and ducking (the ducking is tweened with GSAP :) ), and asset publish/unpublish dates. 

 

For the embedded HTML ... they are calling in external sites which are slideshows, but managed by another group for another purpose; a real estate listings slideshow of active properties within the community that is displayed on a large screen in their sales office which is ... you guessed it ... GSAP! It cycles through 280 properties (+/- a few) daily; transitioning in a property image, then a delayed detail and pricing overlay slides over a portion of the image.

 

But back to the cable channel ... every asset and configuration managed on the Drupal side is fed through custom template files that generate all the GSAP Timelines and Tweens. It has been running for years and is rock solid!

 

So, my not so typical uses are cable channel programming (in the sense of delivering programmed content), digital kiosks, and digital signage.

 

So, I'm curious ... what have others used GSAP for that might be a little outside the norm?!

 

Edit: I changed the title from "What have you done with GreenSock?" to "How have you used GreenSock?" Upon reading it back some time later ... it occured to me that the title could be implying that something is wrong with GreenSock :-o Of course there isn't!

  • Like 7
Link to comment
Share on other sites

Thanks for sharing Shaun!
Wanted to post that interview just now, good job :)

Mine usage is pretty typical, so nothing special - just wanted to say huge THANKS, Jack, for starting this!

P.S
Always had the same problem with math, still, have - I prefer to watch it move :D
 

  • Like 2
Link to comment
Share on other sites

Of course I had to listen to the interview right away. So great to hear your story Jack and how you got this all going.

 

I guess the most interesting thing I've done with GSAP so far is a single page microsite that runs as a full window design and uses GSAP  to deliver everything to the viewer kind of like an app or a presentation instead of scrolling through content.

 

Nothing revolutionary there many others have done similar but I can say that without GSAP I probably never would have had the confidence to attempt it. 

 

 

 

 

  • Like 3
Link to comment
Share on other sites

"GreenSock! Raising the bar and lowering the barriers."

 

I like that. Maybe the new tagline? ;) 

 

Interesting stuff you've been doing with GSAP Shaun. Very creative. My own use is just standard websites so I have no cool use cases to share. In another thread Jack mentioned Tesla was a GreenSock user, but wasn't sure if that was in the cars or not. Wouldn't that be cool if GSAP was powering some of the animations in the actual vehicles? 

  • Like 2
Link to comment
Share on other sites

3 minutes ago, PointC said:

"GreenSock! Raising the bar and lowering the barriers."

 

I like that. Maybe the new tagline? ;) 

 

Interesting stuff you've been doing with GSAP Shaun. Very creative. My own use is just standard websites so I have no cool use cases to share. In another thread Jack mentioned Tesla was a GreenSock user, but wasn't sure if that was in the cars or not. Wouldn't that be cool if GSAP was powering some of the animations in the actual vehicles? 

 

Ah ha ha, nice!

 

I would love to know what Tesla is using it for!! (time to go pick apart some sites :) )

  • Like 2
Link to comment
Share on other sites

Cool idea to start this thread, Shaun. Thanks for sharing.

 

 

--

 

 

in another thread Jack mentioned Tesla was a GreenSock user, but wasn't sure if that was in the cars or not. 

 

Hey Craig. Yeah, for some reason everyone assumes cars. I imagine you saw the synchronized landings of Falcon Heavy's side boosters.

If you study the control room photos you'll find that it wasn't nearly as complicated as one would have guessed!

 

 

tesla.png

 

 

 

 

  • Haha 5
Link to comment
Share on other sites

Ha, good one Blake. Or what if you open the demo in multiple tabs!

 

--- side note ---

 

There is a Tesla dealership in my local mall and I popped my head in with the family as we were shopping this weekend. I'm really not a Tesla fanboy or anything but figured I'd take a peek. My goodness, the seats in the model S are amazing! Totally crazy that a sedan can do 0-60 in 2 seconds (which is faster than any production crotch rocket). Did a little more research when I got home and the 2020 Roadster will do 0-60 in 1.9 and they are using GSAP: https://www.tesla.com/roadster

 

 

  • Like 2
Link to comment
Share on other sites

26 minutes ago, Carl said:

Ha, good one Blake. Or what if you open the demo in multiple tabs!

 

 

I have first hand experience dealing with people messing with code in a fork. Remember this one? I didn't anticipate that people could just bypass the JavaScript filters I had in place, and had to spend an entire day adding filters to the database.

 

 

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

 

 

30 minutes ago, Carl said:

Totally crazy that a sedan can do 0-60 in 2 seconds (which is faster than any production crotch rocket). Did a little more research when I got home and the 2020 Roadster will do 0-60 in 1.9 and they are using GSAP: https://www.tesla.com/roadster

 

 

That's like launching off an aircraft carrier.

 

That's ludicrous!

 

I did a search for the speed settings from the Spaceballs movie, and discovered that Tesla has similar settings. Look at the redirects. I forgot about plaid speed.

https://en.wikipedia.org/wiki/Spaceballs

 

85ycfb0.jpg

 

 

 

  • Like 1
  • Haha 4
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...