Jump to content
Search Community

Give me Suggestions to showcase PLIS

Dipscom 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, later on tonight I am doing a 45 minute talk in a MeetUp I take part.

 

The topic: GSAP Crash Course

 

And as a great and prepared guy that I am, I am getting my stuff together now 5 hours prior to the thing. Ops.

 

The plan is:

 

- Short Introduction on GSAP: What is a tweening engine, what GSAP does, GSAP plugins

- Live code a simple DOM tween

- Live code a simple SVG tween

- Live code a simple Canvas tween

- Live code a simple timeline

- Build a shirne to the CODEGOD (Scratch this one, not enough time in a 45 minute talk)

 

Then, I would like to show a few practical day-to-day example and that where YOU come in. Can I have some suggestions of things I can either steal or setup?

 

Suggestions of simple things

Suggestions of medium/advanced things

Suggestions of which of @OSUblake's pens to show to make people's head hurt.

  • Like 1
  • Haha 1
Link to comment
Share on other sites

That's great Carl, thank you.

 

I will resist the urge to impersonate you. More because most of the people at the meetup know me and I wouldn't get away introducing myself as Carl Schoof...

 

Will definitely rip half of your presentation off. :D

 

Still open for further suggestions, people!

  • Haha 3
Link to comment
Share on other sites

Some simple transitions that people find hard to do, you can live code these

 

https://greensock.com/forums/topic/18904-transformorigin-help/?tab=comments#comment-87689

https://greensock.com/forums/topic/17978-try-to-do-block-reveal-with-diagonal/?do=findComment&comment=82156

 

This one is simple but also has a bit more advanced demo by Blake

https://greensock.com/forums/topic/18880-page-transition-with-barbajs/

 

Simple

 

Add some simple morphSVG, drawSVG and split text effects,

See the Pen aawwgx?editors=0010 by PointC (@PointC) on CodePen

See the Pen oPELMe by PointC (@PointC) on CodePen

 

 

Intermediate

 

Motion blur using SVG

See the Pen WZqBjV?editors=1010 by osublake (@osublake) on CodePen

 

Animate along the path, a bit pacman touch. You can also include your Mario

See the Pen vWGGGv?editors=1010 by osublake (@osublake) on CodePen

 

FLIP using GSAP to animate flexbox

See the Pen vWGGGv?editors=1010 by osublake (@osublake) on CodePen

 

Drag along the path

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

 

Circlular clip path

See the Pen QKEjwv?editors=1010 by osublake (@osublake) on CodePen

 

Handwriting hamburger

See the Pen zLbxzO by PointC (@PointC) on CodePen

 

Movie rating slider

See the Pen devBRB?editors=1010 by PointC (@PointC) on CodePen

 

Gooey Dial

See the Pen oqeJbo by PointC (@PointC) on CodePen

 

Polygon snapping

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

 

SVG Dynamic Text

See the Pen jpEdBd?editors=0010 by PointC (@PointC) on CodePen

 

 

Advanced

 

See the Pen LmOvEQ by PointC (@PointC) on CodePen

 

 

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

 

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

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

 

basically all of Blake's popular demos.

 

Ran out of time.

 

  • Like 6
Link to comment
Share on other sites

So as requested by PointC - Post presentation report.

 

You know the original plan as described at the start of this thread? Out of the window.

 

These were the slides I managed to put together in the hours prior to the talk: https://docs.google.com/presentation/d/1prtPuIM2Gw1Gd5ylTYzfEdUNflWWvnpZ--LdFpSp8fE/edit#slide=id.p

 

Couldn't blow many people's socks off with Blake's stuff because he operates in such a high level that the stuff I showed people didn't quite get why it was baffling or what problem it overcomes. They get really impressed with plain old DrawSVG revealing a stroke but try and explain why the exponential ease is such a cool thing and people go: uh?

 

All in all the feedback was positive, the gang there said it was a nice talk but I don't feel like I have converted anybody. Sorry boss...

  • Like 4
Link to comment
Share on other sites

27 minutes ago, Dipscom said:

They get really impressed with plain old DrawSVG revealing a stroke

 

Did you try tweening a div from x:0 to x:100? ?

 

I can understand the inability to be impressed with Blake's brilliance. You almost need to know a small portion of the GSAP platform and animation/JS in general to understand why something is so neat.

 

No converts? I think upper management is just happy you're out there showing off the platform. Hopefully it was a fun experience for you. :)

 

  • Like 3
Link to comment
Share on other sites

34 minutes ago, Dipscom said:

Couldn't blow many people's socks off with Blake's stuff because he operates in such a high level that the stuff I showed people didn't quite get why it was baffling or what problem it overcomes. They get really impressed with plain old DrawSVG revealing a stroke but try and explain why the exponential ease is such a cool thing and people go: uh?

 

All in all the feedback was positive, the gang there said it was a nice talk but I don't feel like I have converted anybody. Sorry boss...

 

 

I totally get that. People want to see eye candy, and not a lot of code. 

 

I always show this demo to people who don't mess with animations on a frequent basis. It does something that cannot be done with CSS alone, and is pretty simple. I spent less than an hour on it, and to my shock, ended up being the 16th most hearted pen of 2017.

 

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

 

 

  • Like 6
Link to comment
Share on other sites

Hi everyone,

 

It is always surprising what examples arrive at newbies, who are unfamiliar with the matter.
And I speak from my own experience: What impresses me?

 

@OSUblake: Your example comes from the world of normal webs.
To animate a header fits into the everyday life of many coders and could encourage them to give it a try.


And what attracts me too:  little gimmicks.
As in the presentation by @chrisgannon, which @Sahil recently quoted.

 

Best regards
Mikel

  • Like 6
Link to comment
Share on other sites

Yeah, it's always tough to know what's going to resonate with newbies. People love eye candy, but then when they crack open the source code the most impressive examples are often rather intimidating code-wise. 

 

@Dipscom thanks so much for spreading the word about GSAP! I know it takes a lot of guts to put yourself out there, stand up on stage and share. If you're anything like me, you're probably your own worst critic. If you wait until you're 100% confident in the presentation and it's "perfect", you'll never do it. I applaud you for all the effort you put in. 

  • Like 3
Link to comment
Share on other sites

OH LORD COMMANDER CODEGOD!

 

I HAVE FAILED! NO CONVERTS! PLEASE DO NOT TURN ME INTO A WORM!

 

I have a couple of things I consider eye candy but it's a wall of code... So, no dice there. I know there is plenty of cool stuff that can be done with a line of TweenMax and cycle or the function modifier, hopefully with someone who'll be a bit more prepared than me, it will shine.

 

Anyways, it was alright, small meetup, about half a dozen people. I'm no Sara Drasner but I do think I did not suck.

 

@OSUblake that pen of yours is super useful to a ton of people. It's really what people say "practical" animation. Did not surprise me when it was in the top pens of the year.

  • Like 1
  • Haha 1
Link to comment
Share on other sites

Hi guys,


Why not use GSAP for the presentation itself.
Here's a little suggestion for an opener.

 

See the Pen 24598bdab332d8e39ce0115aac3175ad by mikeK (@mikeK) on CodePen

 

By beamer in 4K whatever on a giant screen!?!

 

OK, Charly is a bit older, sluggish and mumbling.

@Dipscom: You may have your own avatar that suits your character.

 

Best regards

Mikel

 

 

  • Like 5
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...