I decided not to try make a comic, just do the literal basics of how it actually works - make working examples of everything I might possibly want to use, and then later on maybe make a test comic.
Then I used this scrollmagic tutorial to figure out how to translate that into scrollmagic, making the scroll point trigger the animation rather than it just happening immediately (or delayed etc)
Had a lot of trouble getting the tweens to actually happen on the scroll point...
I looked at a bunch of demos such as:
https://ihatetomatoes.net/svg-scrolling-animation-triggered-scrollmagic/
https://codepen.io/ihatetomatoes/pen/PqoNpy?editors=0110
https://ihatetomatoes.net/simple-scrollmagic-tutorial/
https://ihatetomatoes.net/demos/scrollmagic-templates/scrollmagic-template-01/
https://codepen.io/erikjrose/pen/RJWBKa
https://ihatetomatoes.net/5-days-with-scrollmagic/
http://scrollmagic.io/docs/animation.GSAP.html#Scene.setTween
svg:
https://codepen.io/daveredfern/pen/zBGBJV
https://codepen.io/traummaschine/pen/BKpJJr
http://www.sweet-web-design.com/wordpress/how-to-animate-svg-on-scrolling/3171/
https://jakearchibald.com/2013/animated-line-drawing-svg/
http://tutorials.jenkov.com/svg/svg-and-css.html
Just to figure out their structure and syntax - everyone does it slightly differently, putting things in different places and using different methods, and I had to play around a lot and figure out how to get it to work - but I eventually got it!!
I took the bezier path itself from the scrollmagic demo.
The svg took a lot of work - I grabbed some other people's code and put it in mine, to figure out how it worked. initially my svg line must've been a shape because it went around the letters twice, so I drew a messier one with the pen tool which worked properly.
testing on mobile......
FINAL CODE ONLINE - it's not particularly tidy, but I wanted it to be purely the javascript as much as possible, to keep it simple for myself
Now that I've got a better understanding of the basics, I think I have a better plan as to how my eyes comic I did a while ago could work, so maybe I will do that.
No comments:
Post a Comment