Jump to content
Search Community

Animating canvas elements that are redrawn on scroll

seanom test
Moderator Tag

Go to solution Solved by OSUblake,

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

Hello, 

 

We've been scratching our heads on the following problem for a few days now and wonder if someone can help. 

 

We have a series of elements (dots in this case) and attempting to create a sort of fisheye effect where the dots at a certain point in the screen get larger. 

 

I've created the following Codepen, that shows the type of effect we are trying to achieve. (Though the grouping needs tightening up)

See the Pen qaKBXX by Seanom (@Seanom) on CodePen

 

I toyed with the duration but found that if the user scrolls too fast then events are skipped. I really like the animation effect on the above pen but it has been pointed out that we don't know the height of these pages so in theory adding 5000+ dom elements to a page and then animating them all using scroll magic and GSAP could be a performance issue.

 

We have started to move this over to canvas as think that may handle the redraw events in a more effective way. 

This is very much a work in progress but shows where I am up to at the moment.

 

I have attempted to call a tweenmax.to and animate the dots as they are redrawn but the animation occurs once per page load.

 

Is it possible to have the animation trigger each time the canvas redraws the dots.

 

Hopefully that makes some sense, if it does can anyone help or point me towards some useful material.

 

Thanks in advance 

Sean

 

I've gone over the following threads, but have not been able to apply anything I could get to work

http://greensock.com/forums/topic/7393-how-do-i-reset-a-tween/

http://greensock.com/forums/topic/11740-advice-on-scrollmagic-timelinemax-collisiondetection/

http://greensock.com/forums/topic/7996-engine-update-frequency/

http://greensock.com/forums/topic/7786-how-can-i-hijack-requestanimationframe/

 

 

 

 

See the Pen YGvzgO?editors=1010 by Seanom (@Seanom) on CodePen

Link to comment
Share on other sites

Hello seanom.mail and Welcome to the GreenSock Forum!

 

 It looks like you are already using the GSAP ticker()

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/ticker/

 

The ticker already uses requestAnimationFrame() to update and sync when the the browser renders

 

The first example your using ScrollMagic which uses GSAP as its animation platform, But ScrollMagic is not made by GreenSock. You can find support for ScrollMagic here:

 

https://github.com/janpaepke/ScrollMagic/issues

 

Regarding the second example where your using the resize event handler. Keep in mind that the resize event and scroll event fire multiple times on resize or scroll. In your case you are using the resize event handler. So i would recommend that you add some type of debounce or throttling to limit the amount of times your resize event is fired. This way it only fires once per resize versus many times which could cause some event skipping like you are seeing.

 

Check out these articles on resize debounce and throttling:

 

https://www.html5rocks.com/en/tutorials/speed/animations/

https://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

https://css-tricks.com/debouncing-throttling-explained-examples/

 

I hope that helps!

  • Like 3
Link to comment
Share on other sites

Hi Jonathan, 

 

Thank you for the welcome I've been a long time lurker, normally the forum has an answer for most of my problems, however this time I've been unable to find any help from the forums or google (including the ScrollMagic form) and thank you for the links. I need to read up on the ticker.

 

I think I may need to clarify what I'm trying to achieve?

The first link I posted was an early attempt at creating an animated effect that follows you down the page, we are indeed using ScrollMagic for this, I pasted that codepen for the animation effect I am trying to achieve in the second link that uses canvas.

 

Do you think the ticker is the way to go here?

 

Currently the canvas works out which point is roughly half-way down the screen and then increases the size of the dots, I would like to animate this increase.

If I currently apply a tweenmax then the animation is applied to the canvas, I would almost like this to start a new animation for each circle as it reaches the middle of the page. 

 

The part I am struggling with is working out how to apply GSAP to elements of the canvas, (if that makes sense)

 

Throttling the events are something we need to add back in, this was stripped out at some point, whilst we have been trying to get the animation working.

 

In this instance the issue I have is with scroll and not the resize event, I've removed the resize event from that second codepen to hopefully clarify what I'm trying to achieve.

 

I guess we are trying to replicate an animation similar to the mac dock bar, (http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html) but vertically.

 

Thank you again for your assistance 

Link to comment
Share on other sites

That type of effect could take some time to explain and is really complex techniques and setup. But In your first example i noticed your using a to() tween. Have you looked into using a staggerTo() tween instead. This way the dots don't animate at the same time and can have an offset or delay on when each dot starts by using a stagger tween..

staggerTo()

http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/staggerTo/

This video might help understand stagger tweens

 

Im not really familiar with ScrollMagic but there might be some other users in the forum that can assist you with that. ihatetomatoes has a nice site that goes over GSAP and ScrollMagic: https://ihatetomatoes.net/?s=scrollmagic&post_type=post

You can still use debounce and throttling for the scroll event since both resize and scroll event will fire multiple times.

 

When you work with canvas, its really up to the programmer to make sure that objects are positioned and scaled properly. TweenLite/Max really only changes number values, but the developer needs to use those number values in a way that moves the objects across your canvas.

 

You linked to that fish eye horizontal menu. But it looks like the effect i see you doing is like a parallax scrolling fish eye type of effect. When you say the animation happens once per page load, what do you mean. When i test the 2nd codepen it animates the dots on every scroll or am i missing something.

 

Also forum Moderator Blake has a lot of various codepens made with GSAP and Canvas: https://codepen.io/osublake/

  • Like 1
Link to comment
Share on other sites

Thank you,

I'm certainly finding it complex :)

 

I'll look into the staggerTo, I've used it before but had not considered it here.

 

Switching to staggerTo has helped give that a really nice tight grouping and I like the animation. 

See the Pen YGvyAa by Seanom (@Seanom) on CodePen

 

If I can get that same effect working in canvas I will be happy, we will not be using Scroll Magic for the canvas version.  

 

 

A parallax scrolling fish eye effect is exactly the type of look I'm going for

I am trying to have the new dots be animated when initially drawn. I'd normally use something like FromTo, but once the animation has played (if not set to repeat) it stops and fromTo does not appear to work with canvas elements?

 

I've tried to capture the effect I am trying to achive, as a new dot hits a point its tweened to a scale, say 150%

http://recordit.co/l1zWf1HW6a

 

When doing this in canvas the dots are drawn but not tweened each time a new dot is drawn, the dots just appear at the defined size.

http://recordit.co/GHWBfZgNdF

 

 

Maybe I need to tweak the effect and use from instead of to and then repeat the animation

See the Pen EgRRNr?editors=1010 by Seanom (@Seanom) on CodePen

 

Blake has some great pens there I'm working my way through them but some very useful ones regarding canvas.

 

I'll keep plugging away at it

  • Like 1
Link to comment
Share on other sites

There are also a staggerFrom() and staggerFromTo() method available.

 

staggerFromTo() allow yo to specify your starting and ending values

 

staggerFromTo() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/staggerFromTo/

 

staggerFrom() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/staggerFrom/

 

Also have you tried to limit your codepen example and just do one group. And then once you have the effect right with on group than try to add more. I think that would help you narrow down the effect you want.

Link to comment
Share on other sites

  • Solution

Hi ,

 

These threads might be useful.

http://greensock.com/forums/topic/14912-parallax-scrolling-sections/?p=64129

http://greensock.com/forums/topic/14870-do-i-need-scrollmagic-to-use-gsap/?p=63860

 

For canvas, I would create a virtual scroll using some of the techniques from those threads. And I'm not sure you really need to tween the dots for canvas unless you want a certain ease applied to them. I just drew them at the correct size.

See the Pen 29aa130ac0f4169d10567dcf1053b0a6?editors=0010 by osublake (@osublake) on CodePen

 

.

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