Jump to content
GreenSock

Carl

Master the Art of GSAP: Club GreenSock Members Save 50%

Recommended Posts

 

 

*** UPDATE 9/10/21 THIS PROMOTION HAS ENDED ***

 

 

 

 

Hey All,

 

I'm doing a test run of a special promotion for all Club GreenSock members (Green, Shockingly, and Business).

 

If you've invested your money in the awesome bonus plugins and the ongoing support of the platform I'm happy to offer you 50% savings on Lifetime access to my comprehensive and extremely specialized GreenSock training available at www.CreativeCodingClub.com.

 

For those that don't know, I've spent nearly a decade in these forums and 7 years working at GreenSock helping folks learn the ins-and-outs of the platform.

 

The Creative Coding Club courses are in simplest terms a collection of all the tips and tricks I've learned throughout the years helping frontend developers excel at GreenSock animation and avoid common beginner pitfalls.

 

 

Unlike typical "one and done" courses, the Creative Coding Club is a subscription-model that gives you access to 5 premium courses PLUS new lessons every week (over 120 now).

 

If you've spent any time in the GreenSock docs or these forums you've probably encountered my videos and demos so I'm not going to bombard you with a hard sell... just a killer deal:

 

50% off a Lifetime Subscription to Creative Coding Club (exp 9/8/21)

 

To get this deal you just have to send me a Personal Message (PM) through the GreenSock site requesting a coupon code.

 

Once logged into the GreenSock site follow these instructions

50-step1.png.1f47dccb3c0ea4bec3ecf7ab892bb694.png50-step2.png.01bc1bf130cc6866e455eb5fb49a4016.png50-step3.png.9ccf047132fecaeb5031bf498266f3eb.png

 

 

Once I receive your message I'll confirm your Club GreenSock membership status (by viewing your profile) and send you a coupon code.

 

I'll do my best to get it to you quickly (within 2-12 hours), but understand I do sleep and work ;) 

 

Please review the following before purchase:

 

  • This promotion is being run by Creative Coding Club.
  • GreenSock isn't involved with the selling, maintenance, or delivery of this training.
  • I offer a 28-day 100% money back guarantee. Just send me a note requesting a refund and it's yours.
  • This offer is only available to new Creative Coding Club students. 
  • This offer is only available to people with an active Club GreenSock membership.
  • This offer is only available to 1 member of a Multi-Developer Club GreenSock account. Contact me for info on team plans.
  • You must request your coupon prior to 9/8/21.
  • Coupons must be used before 9/15/21.

 

Let's keep this simple. If you're a Club GreenSock member and ready to commit to mastering the art of GreenSock animation through my Creative Coding Club courses and weekly lessons, send me a personal message (as outlined above)  and I'll get you going.

 

Carl

 

*** UPDATE 9/10/21 THIS PROMOTION HAS ENDED ***

 

Not a Club GreenSock member?

 

Well, this is the best time to join Club GreenSock, gain access to the bonus plugins, AND grab this incredible deal on my training. Remember, to get 50% off my training you must be a Club GreenSock member prior to enrolling.

 

If you're not a Club GreenSock member but still would like me to guide you on your training journey I have a little something for you too.

 

Save 20% on 1 Year or Lifetime memberships to Creative Coding Club (exp 9/8/21)

 

 

 

 

 

 

 

  • Like 7
Link to comment
Share on other sites

Hi Folks,

 

I appreciate the interest in the promotion but a few people have reached out for the 50% off coupon who are not Club GreenSock members.

 

If your status displays as "member" that means you only have a free GreenSock account which allows you to post in the forums.

 

You are only a Club GreenSock member if you have paid for a membership and it is still active.

 

Your profile page and hover card will both show your membership status as Simply Green, Shockingly Green, or Business Green with text or badge

 

Hover card (mouse over your avatar) of Club GreenSock member

hover-card.png.104bf03dc59c8b228ab9122443cbc455.png

 

Profile Page (click on your avatar) of Club GreenSock Member will show a badge

 

profile.png.55a16dfb1078aa341c970e8974a55690.png

 

 

If you send me a coupon request and I don't see your status as an active Club member I won't be able to supply a coupon.

 

Based on the confusion, I have raised the non-member discount to 20% off with code: gsforums

 

Join CreativeCodingClub.com

 

Hopefully this helps clear things up.

 

Carl

 

 

 

 

 

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

Just chucking a fun bonus here to bring a few more eyes to this fantastic deal.

 

Last week I came across this tweet from @kenneyNL showing this interesting contraption that "controlled" an animation.

 

 

I became instantly enamored with the playful animation.

The synchronization with the "inputs" was so perfectly executed that I had to wonder if the device was real.

I also loved the fact that the artwork was so incredibly simplistic (low detail) but conveyed so much emotion and life.

 

With all those great attributes it was just screaming at me to be rebuilt using SVG and GSAP.


I knew the rotations, color changes, face-reveal stuff would be dead-simple to animate and choreograph with GSAP, but I was very intrigued with the scattering of the little circles.

 

Attempting the "random" scatter

I needed random positioning and sizing of the circles around bob (my name for the character) but not behind him. There was no point generating circles that I couldn't see nor did I want to have 90% of circles bunched together off to one side.

 

I decided I needed a "sort-of-circular" distribution of circles around bob.

 

I'm an "avoid confusing math and trigonometry" at all costs type of programmer so I took an approach where I generated a bunch of circles with offset x positions and then used that offset in the transformOrigin and applied a rotation.

 

The approach came this demo from one of my lessons that uses basic <div> elements.

 

See the Pen Bapqwmy by snorkltv (@snorkltv) on CodePen

 

Once I got the basic layout I needed to add some randomness and needed something that was easy to revise and test so I came up with a click-driven approach so I could rapidly test my code

 

Click anywhere to generate the scatter

See the Pen 4804b10ff391109de2d70517bf9913a3 by snorkltv (@snorkltv) on CodePen

 

I was happy enough with the results so I re-wired the function to return a timeline that I could easily nest in my main animation sequence.

 

Within no time I had things spinning around, changing colors and scattering circles.

 

Finished Sequence

 

See the Pen LYLRqPy by snorkltv (@snorkltv) on CodePen

 

 

My approach of using offsets in a transformOrigin and then applying rotation works fine with DOM elements, but SVG is a bit of a pain. As you move and transform elements their transformOrigins need adjusting. Although I kind of got it how I wanted it, the code was a bit confusing and I knew I would have a tough time explaining it if I ever used this for a lesson.

 

After messing with "the wrong and easy way" for a few hours failing to get the exact results I wanted I bit the bullet and pasted in some trig code and found it much easier to tweak to my liking.

 

The scatter function basically has a loop that will:

  • initially determine evenly spaced angles 
  • then offset that angle 5 to 15 degrees in a positive or negative direction
  • then set the circle at that angle using a random radius within a certain range
  • then scale them so that only a few are big

The end result is that there's about 3 circles in each quadrant that aren't too close to each other. 

 

After the circles are all positioned an animation is added to a timeline that shrinks them and moves them randomly.

 

Time break-down for complete project

  • 1hr artwork prep
  • 2hr scatter experiments
  • 0.5 hours building out initial sequence
  • 2hr additional tweaking and testing
  • 0.5 convert scatter to trig-based approached
  • 1hr more tweaking of everything

Although I have to admit it did take more time than I initially thought, I had so much fun along the way.

 

GreenSock's timelines make it so easy to get the exact choreography I wanted.

GSDevTools was invaluable when it comes to testing each part. I love scrubbing slowly to see exactly how things are positioned and how they animate.

 

Being that I'm always focusing on new lessons for my students every week it's rare that I animate something like this just for fun.

 

I'd encourage you to find some fun small animation in the wild and try to replicate it. It's a fantastic way to learn and keep yourself fresh.

 

If you have absolutely no idea how to build a javascript animation sequence like this check out my courses and my special deal above. My training is specifically designed to guide you through the best parts of the GSAP API and help you build fun stuff like this. 

 

Lastly, big thanks to KenneyNL for the inspiration. Check out his twitter profile and give him a follow.

 

He creates loads of free game assets that look amazing.

 

  • Like 5
Link to comment
Share on other sites

How fun, @Carl! Thanks for sharing the adventure (and results).

 

Fantastic deal for Club GreenSock members to pounce on too. I hope lots of them take advantage of this!

  • Thanks 1
Link to comment
Share on other sites

  • 1 year later...
On 8/25/2021 at 4:40 PM, Carl said:

To get this deal you just have to send me a Personal Message (PM) through the GreenSock site requesting a coupon code.

 

hi hope you are well
how can i get the greenSock coupon code 

Link to comment
Share on other sites

Hi @Faz_kh 

 

Thanks for your interest in my courses. Unfortunately, this promotion was only for Club GreenSock members and it expired over a year ago.

 

The good news is I currently have a public End of Year sale that offers tremendous value to everyone.

 

treat-yourself.thumb.jpg.b9901d6e1abfd588276f34d3e17a8796.jpg

 

You can unlock my entire course bundle for only $67 or just $2.95 a month.

 

Below is a list of the over 200 lessons available.

 

I'm confident there is no better value in any front-end training and I hope you find this favorable.

 

Join Creative Coding Club

 

Offer expires Jan 1

 

Carl

 

GSAP 3 Express

  1. Welcome to the course
  2. Our Development Environment
  3. GSAP 3 Express Notes and Instructions
  4. GSAP Object: Tweens and Timelines
  5. Basic Tween
  6. from() and fromTo()
  7. Special Properties: Delay and Repeat
  8. Special Property: Ease
  9. Reading Ease Curves
  10. Special Property: Stagger
  11. Tween Control
  12. Why from() Tweens Glitch and Stop Working!
  13. Using the GSAP Documentation
  14. Why Timelines are Important
  15. Basic Timeline Intro
  16. Position Parameter Visualizer
  17. Basic Timeline Position
  18. Timeline Control and Labels
  19. Simple Rollover / Hover Effects
  20. Rollover / Hover Effects for Multiple Elements
  21. Constant Hover Pulse with Smooth Reset
  22. Project Setup
  23. Basic Animation
  24. Timeline Defaults
  25. GSDevTools
  26. Tweak Timing
  27. Remove Flash of Un-styled Content (FOUC)
  28. Typewriter Effect with TextPlugin
  29. Getting Started with SplitText
  30. SplitText Word by Word
  31. SplitText Line by Line
  32. Get Started with ScrollTrigger in 3 Easy Steps
  33. Percentage-Based Keyframes
  34. Percentage-Based Keyframes Part 2: Benefits, Downsides and Challenges

Beyond the Basics

  1. Chapter Intro
  2. From Illustrator to Animation
  3. Getter-Setter Methods
  4. Smart Play-Pause-Restart Toggle Button
  5. Scrub Through an Animation with an HTML Input Slider
  6. Tween progress() of an Animation
  7. OOPS: Gotta Fix the Buttons
  8. Intro
  9. Callbacks
  10. Build a Timeline Visualizer with getChildren()
  11. killTweensOf()
  12. gsap.utils.wrap()
  13. gsap.registerEffect()
  14. CSSPlugin: Use clearProps to remove inline styles
  15. 3D Transforms
  16. Understanding GSAP's immediateRender Property
  17. Tweening function-based values
  18. Ease-based distribution of start times
  19. Using the weightedRandom() helper function
  20. Using the distribute() utility function
  21. Rubberbander Text Effect
  22. Staggered Staggers. What?
  23. 3D Text Rotator
  24. Repeat Values on Tween vs Stagger Object
  25. Using Callbacks in Staggers
  26. Staggered Staggers with No Gap
  27. Intro
  28. Linear Navigation with addPause()
  29. Non-Linear Navigation Using Labels
  30. Add a Pause to a Timeline for a Specific Amount of Time
  31. Nested Timelines
  32. Functions That Return Timelines
  33. tweenTo() and tweenFromTo()
  34. File Setup
  35. Animate Panel 1
  36. Create a function to animate 3 panels
  37. Morph curve using AttrPlugin
  38. TItle Effects Generator Part 1
  39. Title Effects Generator Part 2
  40. Title Effects Generator Part 3: Wrap Up
  41. Refactoring Multiple Timelines Into a Single Tween
  42. Staggered Animations Variations on a Theme

ScrollTrigger Express

  1. Welcome
  2. Get Started in 3 Easy Steps
  3. Scrub and Pin
  4. Pinning and pinSpacing Overview
  5. Pinning Deep Dive
  6. Pin Spacing
  7. Pinning Car Project
  8. Intro to Parallax Scrolling
  9. Aerial SVG Car Parallax
  10. ScrollTriggers for Multiple Sections
  11. Smooth Scrolling with Locomotive Scroll
  12. Prevent Scroll on Fullscreen Intro
  13. Back to Top Link: fastScrollEnd and toggleClass
  14. Change Nav Color on Scroll
  15. Change Nav Color on Scroll: Part 2 Responsive
  16. Scroll-Based Reading Progress Bar
  17. ScrollTo Plugin and ScrollTrigger (Animated Jump Links)
  18. ScrollTrigger Toggle Animations 4 Ways
  19. Responsive Scroll-Driven Line-by-Line Text Effect Part 1
  20. Responsive Scroll-Driven Line-by-Line Text Part 2
  21. Off-Screen Reset
  22. 3D Rolling Headers
  23. Slide-in Panels
  24. Layered Pinning
  25. Layered Pinning from Bottom
  26. SVG Mega Scroll and Follow
  27. Use ScrollTrigger Callbacks to Control HTML5 Video
  28. Scoll-Driven SVG Path Follower
  29. Part 1: File setup, Alternating Rows and ScrollTrigger Basics
  30. Part 2: Offscreen Reset
  31. Part 3: Mobile Layout

SVG Animation with GreenSock

  1. Welcome! Course Status Updated 11/19
  2. Animating the Guts of an SVG with GreenSock
  3. Style SVG with Attributes and CSS
  4. Exploring More Shapes and Line Styles with Boxy SVG
  5. SVG Path Element: Bezier Curve Commands
  6. SVG Groups and Applying Transforms
  7. SVG Text: Using Custom Fonts
  8. Understanding transformOrigin and svgOrigin
  9. Project: SVG Basic Banner
  10. SVG Strokes: linejoin, linecap, and miter-limit
  11. Avoiding Weird Glitches with Line Animations
  12. Don't Animate tspan Elements
  13. Character by Character Animations Part 1: Characters as Paths
  14. Character by Character Animation Part 2: Characters as Text
  15. SVG Text on Path
  16. SVG viewBox and viewport
  17. Understanding preserveAspectRatio: Putting Skinny Rectangles in Squares
  18. preserveAspectRatio Part 2: Recap and Examples
  19. Marching Ants: Intro to dasharray and dashoffset
  20. Drawing Animated Lines
  21. Using DrawSVG Plugin
  22. DrawSVG Mastery
  23. Adding Custom Split Points with Boxy SVG
  24. Recreating GreenSock.com Jelly Nav
  25. Introducing SVG Clip Paths
  26. Animating SVG Clip Paths
  27. Introducing SVG Masks
  28. Animating SVG Masks: Reveal and Hide Text
  29. SVG Masks: Spotlight Effect
  30. Clip and Mask: Feathered Colorize Effect
  31. Welcome to Programming SVG
  32. Building the Worst SVG Drawing App
  33. SVG Background Generator (blend modes, gradients, random start time)

B-sides, Bonuses, and Oddities

  1. Laziest Response Slider Using repeatRefresh
  2. Responsive Full Screen Circle using CSS VMAX and Edge to Edge Text
  3. Curved motion using different eases for x and y
  4. Reveal dots while animation plays
  5. Constant Speed with Random Motion
  6. Directional Rotation
  7. Bug Race in a Single Tween
  8. Bug Race Complete: Jerk Level and Weighted Random Values
  9. Hacking Ease Curves
  10. Basic Animated Counter using Snap Plugin
  11. Customizable and Re-usable Counter Effect
  12. Auto-close open item // reverse current timeline
  13. Animated Snow using Interpolate
  14. Favorite Mask Effects
  15. Using Clip-Path in a Custom Effect for Multi-directional Wipes
  16. Hard Edge Gradient Animated Fill
  17. Mask-Up / Scale-Down Effect: Chevy Tahoe Ad Exploration
  18. Mask-Up / Scale Down Part 2: optimizations and registerEffect()
  19. Text Mask Effect Using Blend Modes
  20. 3D Card Flip Effect (double-sided)
  21. Interactive 3D Card Flip
  22. 3D Card Flip Basic Game
  23. Responsive Hover Nav
  24. Gallery with Burn-in Effect
  25. Image Comparison Tool with Draggable
  26. Gradient Filled Text on Scroll
  27. Intro to ScrambleText Plugin
  28. Staggered Text Effect with ScrambleText
  29. Creating distinct enter and leave animations with a single timeline
  30. Circular Distribution of Elements without much Math
  31. Ferris Wheel: Counter-rotation to keep spinning elements upright
  32. Interactive Peacock with Modern GreenSock
  33. Banner: Clean loops and custom end screens : Part 1 Callbacks
  34. Banner: Clean loops and custom end screens : Part 2 TweenTo()
  35. Multiline Text Mask Effect (overflow hidden) Part 1: Basic setup
  36. Multiline Text Mask Effect Part2: Responsive
  37. Using CSS Clamp for Responsive Text Sizing
  38. Zero-Duration Tweens and set()
  39. Zero-Duration Tweens Part 2: addPause()
  40. Gallery with AutoPlay Part 1: File Setup / Basic Functionality
  41. Gallery with Autoplay Part 2: Toggle Switch
  42. Breaking Free of the Timeline Mindset: Part 1
  43. Breaking Free of the Timeline Mindset Part 2
  44. Breaking Free of the Timeline Mindset Part 3
  45. Creeping and Jumping Dots
  46. Physics Plugins Part 1: PhysicsProps
  47. Physics Plugins Part 2: Physics2D
  48. Rotating Input Dials (SVG)
  49. Challenge: Slime Conveyor Belt
  50. Solution: Slime Conveyor Belt
  51. Constant Loop with Return to Start
  52. Drop Down Descramble Part 1: Technical Exploration
  53. Drop Down Descramble Part 2: Building the Animation
  54. Animating background-size cover and contain
  55. Constant Loop with Return to Start: Part 2: Smart Reverse
  56. Staggered Bars Wipe Transition
  57. Ease-based distribution of start times
  58. GSAP 3 Express Free Trial Ad
  59. Zim Splat
  60. 3D Inverted Cube Spinner
  61. getRelativePosition() Spinner Demo
  62. One Line of Code Mega Demo
  63. Apply a CustomEase to a MotionPath Tween
  64. How I Built my CustomEase Visualizer
  65. Pixi Circulator Beta
  66. Pixi Sweet Corn
  67. Pixi Circles Top and Bottom
  68. Dynamic Text Effect Self Playing
  69. Dynamic Interactive Text Effect

Special Eases

  1. SlowMo Overview
  2. In Your Face Effect
  3. Whirl-Around Text Effect
  4. RoughEase Overview
  5. Scary Flicker
  6. Shiver
  7. Configure an elastic ease
  8. Steps Ease for Spritesheet Animations
  9. CustomEase Quick Start

Unlock all these lessons for only $67 (expires Jan 1)

 

 

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