Interactive touch and hold animations

[dogzzz]

Hi there,

 

If you scroll down this page  from 'theft defense' to 'super smart electronics' : https://www.vanmoof.com/en-GB/s3?color=dark you get a few interactive animations that respond to click and hold (as well as click, hover and scroll). 

 

I can't quite tell how these are made, i can see a canvas element and a '___gl' class on them. 

 

Has a designer created an animation and it gets activated with javascript? I've looked in the inspector but can't see much.

 

Would the spinning wheel in the intelligent motor section be an svg or some kind of webgl or other graphic that simply gets activated on click? Is the bulk of the work with the designer getting the canvas right and then gsap can be used over the top? Perhaps there's no use for GSAP with this one at all? 

 

Similarly with the hold to brake animation below, is that an interactive svg or canvas illustration or something? has someone made that with adobe and exported it? Is there another library or programme to make that and then the interactivity gets dealt with separately?

 

On the super smart electronics one, does gsap deal with click and hold? Also is there some programme to make those graphics and they just get rendered on a canvas which can then be made interactive?

 

Thank you for your advice 

 

 

[Cassie]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

It's hard to say exactly how these animations were made but the usual process is that animations are mocked up by designers and then recreated by creative developers in SVG/with image sprites/with three.js/with DOM elements or using a combination of media.

The more you learn about GSAP the more you'll be able to break down possible techniques used.

[Cassie]

I've broken down your questions into similar themes because there were a lot of questions!

Quote

 

Would the spinning wheel in the intelligent motor section be an svg or some kind of webgl or other graphic that simply gets activated on click?

Is the hold to brake an interactive svg or canvas illustration or something?

 

I ran it through wappalyzer - They're canvas but there's no three.js loaded so it's either just JS canvas or handwritten webGL
 

 

Quote

 

On the super smart electronics one, does gsap deal with click and hold?

Does the interactivity gets dealt with separately?

 

You can handle how a timeline is controlled in GSAP, e.g. pause or play it - but inteactivity is usually just handled with JS event listeners
 

 

Quote

 

Perhaps there's no use for GSAP with this one at all? 

Is the bulk of the work with the designer getting the canvas right and then gsap can be used over the top?

Is there some programme to make those graphics and they just get rendered on a canvas which can then be made interactive?

Is there another library or programme to make that?

Has someone made that with adobe and exported it?

Has a designer created an animation and it gets activated with javascript? I've looked in the inspector but can't see much.

 

GSAP is definitely being used on this site, The designer would likely design the concepts, but the setup would be hand coded with JS and then the elements (very likely) are animated with GSAP 
There are ways to create animations with software and export them, like Lottie for SVG. But none that are widely used for canvas animations like this, and none that are as performant and flexible as hand coding.

[dogzzz]

Thanks so much really appreciate that

 

I just wanted to clarify something as well 

 

When you scroll down this page: https://www.vanmoof.com/en-GB/s5

 

The text that comes in with the masking box on scroll that says 'Revolution, built in' , can this all be done with clever use of ScrollTrigger (and perhaps scale and opacity on scroll)?

 

Also the rather complicated graphic below (which I can only akin to the Airpods tutorial where the background moves on scroll and text comes up over the top), can that also be done with expert use of ScrollTrigger? (Indeed, was this animation itself done with ScrollTrigger?)

 

Thank you very much

 

[Cassie]

Yep,  all possible with scrollTrigger.

Here's a thread discussing that technique!

[dogzzz]

Fantastic thanks so much!

[dogzzz]

Hi there,

 

I'm trying to replicate the animation about halfway down this page: https://www.vanmoof.com/en-GB/s5

 

I've managed to get the opacity of the 'pin-me' section to go to 0 as I want, and I've managed to get the 'pin me maybe' div with the title to pop out and become fully opaque at the end of the scroll. However, I want the title to pop out as soon as the pin-me div has faded out, ie that goes away and the title pops out over it.

 

At the moment you have to keep scrolling down the page to see the effect, but I want it to be part of the same animation. 

 

Please could I get some advice on how to achieve this? It's probably quite simple I just can't see it

 

I've made a codepen here:

See the Pen oNEqzWR by zdogg (@zdogg) on CodePen

 

Thank you 

[GreenSock]

Hi @dogzzz. It's a little tough to follow posts like "I want it to do ____ and then ____ and then ____ and also ____ while ____ but on the 4th part it isn't quite doing what I wanted"  I'm just not totally sure what you're looking for here, but typically the best way to approach this is for you to ignore ScrollTrigger completely to begin with and just get your animation(s) looking the way you want. THEN once that's done, hook it up to the scroll position with ScrollTrigger. 

 

From a cursory glance, it looks like you're creating a bunch of separate timelines, each with a ScrollTrigger. That may be totally fine, but it sounds like you're wanting them to be more cohesive (combined). So I wonder if it's just a matter of combining your animations into a single timeline that has the ScrollTrigger. Maybe give that a shot and if you get stuck, provide a minimal demo that only shows the part that you're stuck on. The more focused your demo, the more likely you'll get a quick and accurate answer. 

 

In case you're not familiar with it, the position parameter will be your best friend when creating a timeline with multiple animations that you want to choreograph. 

 

Good luck!

[dogzzz]

Fantastic thank you :)

[dogzzz]

Thank you, have updated the codepen in case that helps anybody who comes here -- putting everything into one timeline made it all work perfectly