Jump to content
GreenSock

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

CodeSandbox Challenges 🏆


| Cassie
11214

Are you familiar with CodeSandbox?

If not, you should check it out! It's a super powerful online code editor and prototyping tool that makes creating and sharing web apps faster. Plus, *drum roll*... you can now use all the Club GreenSock plugins on CodeSandbox via npm. 🥳

 

To celebrate this we teamed up with the CodeSandbox team to host some fun creative challenges in April 2022...

 

Winners!

Be sure to check out our favourite submissions - there's some brilliant ones in there.

Week 1

Scrolling animation with ScrollTrigger

Congratulations to our wonderful week one winners for kicking this off in style! Victor and Ismael.

Week 2

SVG line animation with DrawSVG

Congratulations Christian and av! Such creative entries.

Week 3

Getting to grips with Flip - using the Flip Plugin

Congratulations Victor (again) and Christian (again)!

We couldn't have you win twice though.  So the prizes will be going to our very deserving runner ups this week! Toso and Julia

Meet the judges.

Meet our immensely talented judges. Each week they'll vote for their favourite demo  Huge thanks to every one of you!

  • Like 3

Get an all-access pass to premium plugins, offers, and more!

Join the Club

We love seeing what you build with GSAP. Don't forget to let us know when you launch something cool.

- Team GreenSock



User Feedback

Recommended Comments



Tried to make something incorporating my Japanese nationality for fun and for learning(focus was on creativity with absolutely zero care for code quality). Shout out to gsap, ive used gsap since AS2 days. it is THE BEST ANIMATION LIB ON THE WEB!!! As a former Creative Technologist I cant tell you how many projects ive incorporated some kind of gsap tween within.

 

Here is my project: 

http://thepearlharborexperience.com/

 

Screenshot_61.png.c2c576a6ef912da6aedbe7851a567196.png

 

Thank you

  • Like 6
Link to comment
Share on other sites

@Cassie

I tried
https://codesandbox.io/s/brave-swanson-k3mxsf?file=/index.html

But I'm using install gsap .tgz file locally 
I don't want to put it online

Stuff crashed when I imported it into codesandbox and reinstalled as gsap-trial
My guess is that I don't know enough about codesandbox

Probably need to flush the old node modules and reinstall
(which I did, but maybe still needs some love or flush cache, or some vite error >_<)

  • Like 1
Link to comment
Share on other sites

@Cassie tysm , i didn't know i can re-enter my demo more than once , i already start drawing another svg.                       

 so can i post the 2 demos for this week's challenge , or only 1 demo allowed  ? 

  • Like 1
Link to comment
Share on other sites

( What if ! ) The last week's  demo but re-created it with SVG draw plugin and removed scroll trigger

desktop & laptop users : https://kz0ex6.csb.app/

for mobile users ( cuz the responsive mode looks so different in parcel sandbox ) : https://codesandbox.io/s/what-if-kz0ex6

*************************

( Harry potter ) This week's demo

 https://36u0if.csb.app/

***********************

problem with sandbox = refresh ;)

post more svg challenges i love it ❤️

 

Screenshot 2022-04-16 at 17-32-15 Svg Draw.png

  • Like 1
Link to comment
Share on other sites

Hi, 

Here is my submission.

https://b2mg4r.csb.app/
From a very long time I wanted to create something like lemonade . Finally I created this demo with my very basic illustrator drawing skills 😀. So many learnings, It is always challenging to handle vertical line SVG(line is also not straight there are graphics) with scrub etc. Lemonade has two layouts one for smaller device and one for large. For this demo just created one and it is looking fine in smaller screens as well. 

 

  • Like 2
Link to comment
Share on other sites

Would I be allowed to submit for this weeks challenge (and just not be part of the prize draw as I won in the previous week)?
I'm nearly done with my FLIP experiment (Just building the levels and then trying to chuck some more FLIP in wherever I can) :D

  • 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

×