Jump to content
Search Community

sbest58

Premium

  • Posts

    19

  • Joined

  • Last visited

 Content Type 

Posts posted by sbest58

    ScrollTrigger with canvas animation

    in GSAP

    Posted

    Hi Buster,

    My workflow is to export video from After Effects as numbered frames, load the frames into Adobe Animate then select all frames in the library panel, right click and select create sprite sheet - create without spaces. I then import sprite sheet into Photoshop and crop any empty space so I have the right size for the rows and columns of frames, I usually sharpen and boost the colours also. Then I will run the image through ImageOptim to bring the size down to something acceptable to Google DoubleClick Studio.

    Hope this helps.

    • Like 2
    • Thanks 1

    ScrollTrigger with canvas animation

    in GSAP

    Posted

    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

    ScrollTrigger with canvas animation

    in GSAP

    Posted

    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

    ScrollTrigger with canvas animation

    in GSAP

    Posted

    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

     

    ScrollTrigger with canvas animation

    in GSAP

    Posted

    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

    ScrollTrigger with canvas animation

    in GSAP

    Posted

    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

    ScrollTrigger with canvas animation

    in GSAP

    Posted

    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

     

×
×
  • Create New...