Leaderboard

Hi @smallio, Exactly right, drawSVG only works with strokes. But "writing a special font with strokes" is almost impossible. @PointC has some examples in the forum that cover this topic. I quickly found this. The trick: "use drawSVG to animate the mask and reveal the logo" or a letter. That is still complicated for all letters ... Happy masking Mikel

I would say mikel is right. Your problem is that fonts are outlines of the outer shape and therefore that's where the stroke is placed. Redrawing those fonts as single line strokes even if it's possible would require substantial vector drawing skills. Even this would only work it the fonts are absolutely consistent in their thickness and could be represented as a single stroke. We can see in the "a' right from the start in 'social' that it is not. It might be possible to create a mask from the outer shapes of the fonts and then create paths that roughy follow the center line of the those shapes with strokes that are large enough to fill them and animate the paths inside the mask. This would not require the precision of perfectly redrawing the fonts themselves, as long as long as you're reasonably close it should work. You'd probably have to set these up in illustrator unless you're a genius at plotting path points. This is sort of what is done in the anime post except that they created an outline object of the stroke letters that lines up with the stroke objects so they don't need a mask for inner stroke and outer stoke animations to line up.

Thanks, Mikel! Seems like about how much js I should have needed to animate a circle mask opening. And maybe I should be thinking about the problem differently, like your solution doesn't even use a mask. Maybe there is a way I can cheat the visual effect, without needing the actual mask and unmasking a bunch of items, like tweening their opacity at the same time I expand the circle., I'm also going to have to spend some time with your scroll activated code, more elegant than my solution of using a scroll library and feels smoother! Will report back!

Hi @jimthornton, and here is a rough concept for an animation that is activated by scrolling: Make the best of it ... Mikel

Couldn't have done it without your help, I appreciate it -Shawn

Hi davi, I totally understand your concern, as I have been annoyed working with the generated code from - for example - Google Webdesigner or Adobe Edge Animate. And I agree that the produced code has to be easily editable without the app. Attached you can find an example of what an anivendo-export-file looks like (in this case it is Google DFP optimized and includes a Firefox Bug Workaround. You will see: No mess of Code And it is very easily editable. Do you agree? example.html

Hi @fencepencil, Congratulations - great job. Mikel

You are adding the class active to project instances but you are telling gsap to animate the items overlay etc... which is animating all the items regardless of what happens to the project element. The pen attached moves the variable declarations inside the function and queries the elements inside each specific project element rather than the document. This way you don't need two scenes and timelines. A scene and timeline is created for each instance of project and reacts to the trigger independently. I think this is what you're after. For whatever reason forEach cannot be passed 'this' directly so we pass it as a variable reference 'self'. Class toggle active is not required for the animation but you can retain it for other scripts if needed.

Think of the tweenFromTo() stuff like instructions to move a needle on a record (music). It wouldn't make sense to write the code the way you did because you've got an overlap of 5 seconds where two hands are fighting for control of the needle's position, telling it to go to completely different places. So on a single tick, one tween says "render that timeline at 0.25 seconds" and immediately after that (literally on the same tick), the other one says "render that timeline at 5.25 seconds". Whichever one runs last would win, but it's just a bad idea to structure things like that (in my opinion). See what I mean?

Hi @jimthornton, There are many ways to Rome and sometimes to a simpler solution. Here is just a playing field as a suggestion: Happy circling by tweening ... Mikel

Outstanding post, Craig! I'm new to the Greensock world (just asked my second question this afternoon ha) and reading through your story has inspired me to learn Javascript via GSAP. It's ironic, as I was driving home from work this evening, I thought to myself "this GSAP thing could really help me learn Javascript as a whole". You're right, it's actually fun learning this way. Greensock is simply amazing. I've already had wonderful experiences with @Carl and @mikel. Seems like a great little community and I'm happy to be a part of it We have a lot of similarities, just from reading through your post. I'd like to thank you for writing this and know that it has inspired me (and probably a lot more) to continue down this scary path. -Shawn

Hi, I re-found this library that was recently revamped and it appears to work in IE using intersect observer... demo: https://russellgoldenberg.github.io/scrollama/basic/ repo: https://github.com/russellgoldenberg/scrollama info: https://pudding.cool/process/introducing-scrollama/

Here you go.

I had trouble understanding exactly what you want, but if you want the firebrick divs to wait 3 seconds until wheat is done AND you want the whole sequence to repeat you can use just 1 timeline. tl1.staggerTo('.box1', 1.3, { ease: Elastic.easeOut, x: 200 }, 0.05) .staggerTo('.box1', 1.3, { ease: Elastic.easeOut, x: 400 }, 0.05) .staggerTo('.box2', 1.3, { ease: Elastic.easeOut, x: 200 }, 0.05, "+=3") //wait 3 seconds before box2 starts .staggerTo('.box2', 1.3, { ease: Elastic.easeOut, x: 400 }, 0.05) If you need something different please clarify the exact order things should happen and how the delays and repeats should work. I wasn't sure if the wheat should start repeating on its own before redbrick started.

I'm plotting a bezier path for a car to drive around using scrollmagic, I'm finding it difficult to visualize the path i need to do for the bezier animation - is there a way to visually show the path during development so i can debug it?