Jump to content
Search Community

Tunnel animation (responsive)

fripi test
Moderator Tag

Recommended Posts

Hi everyone,

 

I need to make a responsive "tunnel" animation, based on primitive forms.

Visually it's pretty simple but I admit don't know where to start, I'm no JS master at all.

I have a video that shows exactly what I try to do : https://youtu.be/ClsdqojQ4hM

 

Has anyone an idea, a simple code to achieve that?

 

Thanks

Link to comment
Share on other sites

Hey fripi and welcome to the GreenSock forums!

 

There are a lot of ways you could approach this demo - using DOM, SVG, Canvas, and WebGL could all work for something that simple. What are you going to use it for? Is it just for fun? 

 

Performance wise, Canvas and WebGL would be best. But if you're just doing it for yourself then I recommend whatever you're most used to. 

 

My article on scaling responsive animations may be of interest to you. 

 

33 minutes ago, fripi said:

Has anyone an idea, a simple code to achieve that?

We don't have the capacity to do projects for you, but we're happy to help if you have specific questions or issues that you're running into! Keep in mind that this is a GSAP-specific forum ;) 

Link to comment
Share on other sites

Hi Zach,

 

I produce banners usually in DOM or with Animate using exclusively GSAP, as I started using it since the beginning in flash years ago.

 

But a friend asked me that, as he want's that kind of animation in background of his site (wordpress I think) and so it must be responsive for desktop and mobile, but as I never do websites, and never did such kind of animation...  I was curious about performance, so I'll try in canvas (tru Animate) but then I can't do a codepen 🤔

 

Thanks for your answer and the link to your article, will read it tomorrow!

Link to comment
Share on other sites

So I did something in canvas very simple to start

just putted a rectangle, duplicated that in a circle ans animate the scale of each

 

But I try to figure out how to put it in codepen, I linked to createjs and tweenmax, then I copied the index.html body in "html" and all the index.js in "js" but it doesn't seem to be enough :

See the Pen gOpMJxr by fripi (@fripi) on CodePen

 

Archive.zip

Link to comment
Share on other sites

15 minutes ago, ZachSaucier said:

Loading create.js and calling the init() function at the bottom got it to work for me:

 

 

Indeed seems to work just by adding init() at the bottom, great!

I already called createjs in my codepen, strange how it reacts in yours, way to many objects compared to mine, I got max 48 green rectangles and in yours it seems endless

Link to comment
Share on other sites

1 minute ago, fripi said:

I already called createjs in my codepen, strange how it reacts in yours, way to many objects compared to mine, I got max 48 green rectangles and in yours it seems endless

The version you were loading was still throwing an error related to cjs.MovieClip so presumably that's why you have less rectangles.

Link to comment
Share on other sites

But the latest version of createjs doesn't work well with that version of adobe animate canvas, I don't see errors in my console with my version

the speed is right and amount of rectangles to, in your adapted version it doesn't seem to take in account my setinterval/clearinterval 🤔

just trying to understand what's happening and to optimise my noobie code.

 

But all in all it seems to work http://www.sharpness.be/demo/202002_supernova/

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