sbest58 Posted June 14, 2020 Share Posted June 14, 2020 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 More sharing options...
GreenSock Posted June 15, 2020 Share Posted June 15, 2020 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! 1 Link to comment Share on other sites More sharing options...
sbest58 Posted June 15, 2020 Author Share Posted June 15, 2020 Hi Jack, I'm just after the basics. Here is a test with the shark as a canvas animation: https://roguemotion.graphics/sharktest.html Sorry could not work out how to put it on code pen. Steve sharktest.html sharktest.js Link to comment Share on other sites More sharing options...
sbest58 Posted June 15, 2020 Author Share Posted June 15, 2020 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." index.html Link to comment Share on other sites More sharing options...
sbest58 Posted June 15, 2020 Author Share Posted June 15, 2020 Do not understand what is going on with this. sharktest.html Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 15, 2020 Share Posted June 15, 2020 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 More sharing options...
sbest58 Posted June 15, 2020 Author Share Posted June 15, 2020 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 More sharing options...
ZachSaucier Posted June 15, 2020 Share Posted June 15, 2020 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 More sharing options...
sbest58 Posted June 15, 2020 Author Share Posted June 15, 2020 Hi Zach, Will try to get it into codepen but having issues with things like: <body onload="init();"> it runs on https://roguemotion.graphics/sharktest.html without any errors - but no scrolling happening. Steve Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 15, 2020 Share Posted June 15, 2020 9 minutes ago, sbest58 said: having issues with things like: <body onload="init();"> There's no need for that. Just run init() in the JS section. Watch the video in the linked CodePen thread to learn more about how to use CodePen. Link to comment Share on other sites More sharing options...
sbest58 Posted June 15, 2020 Author Share Posted June 15, 2020 See the Pen xxZEqzE?editors=0110 by sbest58 (@sbest58) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 15, 2020 Share Posted June 15, 2020 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. 1 Link to comment Share on other sites More sharing options...
sbest58 Posted June 15, 2020 Author Share Posted June 15, 2020 Thank you Zach, that is brilliant. Cheers Steve Link to comment Share on other sites More sharing options...
sbest58 Posted July 26, 2020 Author Share Posted July 26, 2020 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 More sharing options...
ZachSaucier Posted July 27, 2020 Share Posted July 27, 2020 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 More sharing options...
ZachSaucier Posted July 27, 2020 Share Posted July 27, 2020 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 More sharing options...
sbest58 Posted July 28, 2020 Author Share Posted July 28, 2020 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 More sharing options...
ZachSaucier Posted July 28, 2020 Share Posted July 28, 2020 That's quite a lot of code to go through. Do you have a specific question/issue? Link to comment Share on other sites More sharing options...
sbest58 Posted July 28, 2020 Author Share Posted July 28, 2020 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 28, 2020 Share Posted July 28, 2020 Try applying the approach of the first demo in my post above. If you have trouble then let us know what you're having trouble with and we'll be happy to help. Link to comment Share on other sites More sharing options...
sbest58 Posted July 28, 2020 Author Share Posted July 28, 2020 Hi Zack, What I am struggling with is how to move the sprite sheet around. The example of the coffee drinker has a sprite sheet with just one row. Mine has 9 columns and 20 rows Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 28, 2020 Share Posted July 28, 2020 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). 2 Link to comment Share on other sites More sharing options...
sbest58 Posted July 28, 2020 Author Share Posted July 28, 2020 Thanks Zach, I see what you mean about the space. If I export the sprite sheet from Animate with a white background you can see the spaces. Link to comment Share on other sites More sharing options...
sbest58 Posted July 28, 2020 Author Share Posted July 28, 2020 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 More sharing options...
ZachSaucier Posted July 28, 2020 Share Posted July 28, 2020 Great! Now use the approach I provided with that new asset. I believe in you Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now