Thursday, 14 June 2018

GSAP/Scrollmagic basics

with the GSAP tutorials I figured out the basics of animating/tweening
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