Jump to content
Search Community

ScrollTrigger with canvas animation

sbest58 test
Moderator Tag

Recommended Posts

I am looking for examples of controlling a canvas animation with ScrollTrigger. The documentation suggests this is possible, but not sure where to start. I am creating banner ads with Adobe Animate and would like to use ScrollTrigger for presentation effects on my website.

I have a video looping on my home page and would like to use ScrollTrigger to control the video. The video is currently streaming from Vimeo but I can make it in Animate as a canvas animation similar to the banners.

I use GSAP from inside Adobe Animate for the superior easing effects and more precise controls.

https://roguemotion.graphics

 

Link to comment
Share on other sites

I read your question a few times but I'm still not quite sure what you're asking. Is there something specific we can help with? 

 

ScrollTrigger can be used to trigger pretty much anything you want on scroll. Totally flexible. Use the callbacks for whatever. Use the progress value and feed it to your video to control playback. Obviously if you're animating anything related to canvas with GSAP, that could also be hooked up to a ScrollTrigger quite easily. Does that help at all? Maybe if you create a reduced test case that illustrates what you want to do and give us a more specific question, we'll be able to get you what you need. 

 

Thanks for being a club member!

  • Like 1
Link to comment
Share on other sites

2 hours ago, sbest58 said:

Also, is it possible to control the playback of a video from Vimeo?

If so how?

I do not understand how to:

"Use the progress value and feed it to your video to control playback."

Sure. You'll likely want something like this:

ScrollTrigger.create({
  trigger: container,
  start: "top bottom", // this is the default value so it can be left out
  end: "bottom top", // this is the default value so it can be left out
  scrub: true,
  onUpdate: self => {
    const progress = self.progress;
    // do something with progress like update a video or canvas
  }
});

 

Link to comment
Share on other sites

Thanks Zach,

 

The main thing I am trying to do is control a canvas animation with ScrollTrigger - see previous sharktest.html file.

I do not seem to be getting anywhere - the animation just keeps playing and scrolling has no effect.

 

Steve

Link to comment
Share on other sites

20 minutes ago, sbest58 said:

The main thing I am trying to do is control a canvas animation with ScrollTrigger - see previous sharktest.html file.

I do not seem to be getting anywhere - the animation just keeps playing and scrolling has no effect.

The file that you sent just has errors in the console and doesn't display any animation.

 

We highly suggest that you use something like CodePen to recreate a minimal demo of the issue with all irrelevant parts stripped out. That will make it much more likely that your question gets answered quickly.

 

Link to comment
Share on other sites

Thanks for making a demo. That's quite a large chunk of code that Animate exported.

 

It took me a bit to figure out how to progress through your animation because I haven't used EaselJS much but once I realized I could by using exportRoot.goToAndStop() it was pretty straightforward:

See the Pen LYGRymB?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Things I changed: 

  • Made sure to .stop() the animation at the beginning.
  • Removed position: absolute; from the canvas. Add pin: true instead.
  • Used the #animation_container as the trigger.
  • Calculated the total frame based on the duration and progress.
  • Like 1
Link to comment
Share on other sites

  • 1 month later...

Hi Zach,

Decided to try and optimise my scroll animation by using the example of the Apple AirPods instead of the bloated javascript from Animate.

I am running into a couple of problems:

1. if you scroll up and push it at the top I get error messages because it is looking for image files with a negative number - 00-1.jpg etc.

2. I cannot set the scroll height correctly - it unpins and starts scrolling up half way through the animation.

3. I would like to use ScrollTrigger to control this but unsure where to start.

4. I am getting warnings in Safari: 'This web page is using significant energy. Closing it may improve...etc.'  Could this be the multiple event listeners in the code?

See the Pen vYLMYPo by sbest58 (@sbest58) on CodePen

 

Cheers

Steve

Link to comment
Share on other sites

15 hours ago, sbest58 said:

I would like to use ScrollTrigger to control this but unsure where to start.

I'll start here as using it could fix your 1 and 2 problems. A great place to start is the video in the ScrollTrigger docs! It shows step by step how ScrollTrigger is useful and how to use it.

 

@Carl also has a mini-course video series on learning ScrollTrigger.

Link to comment
Share on other sites

15 hours ago, sbest58 said:

I am getting warnings in Safari: 'This web page is using significant energy. Closing it may improve...etc.'  Could this be the multiple event listeners in the code?

That's probably less due to the event listeners themselves and more due to your animation. Drawing bunch of images with little time between is probably not the best approach. I'd probably use <img> elements or a sprite instead. Here are a couple of examples using ScrollTrigger:

See the Pen mdVEpKK by GreenSock (@GreenSock) on CodePen

 

Link to comment
Share on other sites

Hi Zach,

Thank you for the link, Carl's course is very good.

What I am struggling with is how to load 178 image files into a timeline. 

Alternatively how to load a sprite image that is laid out in a grid 9 columns 20 rows with the sequence running top to bottom of each column.

Here is the example you worked on before controlling the Animate code, now with new sprite...

See the Pen WNrBdQx by sbest58 (@sbest58) on CodePen

 

Link to comment
Share on other sites

I was trying to avoid using all that code generated by Animate and just use a gasp timeline with the images sequenced either from the individual image files (178 of them) or from the sprite sheet being used by the animate code in the example.

SharkSprite_atlas_NP_1.jpg

Link to comment
Share on other sites

To compensate for your rows, you just need to use the index of the current image to calculate where in the grid the background position should be. Here is an approximate version using a proxy object to keep track of the index:

See the Pen RwrmBpJ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It would be easier if the image used was better (no extra space).

  • Like 2
Link to comment
Share on other sites

Hi Zach

 

have updated the sprite image..

removed all spaces and 2 images - the sequence is now left to right row by row 

frame size 720x405 Sprite sheet is now 7920x6480 . 11 columns and 16 rows

file name SharkSprite2.jpg - same location as previous one.

 

Cheers

Steve

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