Jump to content
Search Community

Play gltf animation based on scroll

Guest
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

We agree, accessible animation is incredibly important to us.

 

I've actually even written an article on that topic - It's got some really useful GSAP/ScrollTrigger tips in there that you may be interested in. There's also an upcoming addition in the next release we're very excited about. ☺️

Glad that we could end out this thread on a high note. Good luck with your project. I hope you manage to get help with the rendering issue with the three.js folks.

  • Like 2
Link to comment
Share on other sites

1 hour ago, GreenSock said:

Most (if not all) of the issues here are related to rendering

@joxd concerning Three.js, the following two pages from the Three.js docs should help allow you to create responsive outcomes.

 

https://threejs.org/manual/#en/responsive

https://threejs.org/manual/#en/rendering-on-demand

 

Similar concepts apply to vanilla canvas projects also.

 

5 hours ago, joxd said:

1. when you resize your viewport - on mobile for landscape/portrait is broken and 2. it is not responsive and 3. Animation does not keep its progress (it is off). 

In the end if you still feel there is a logic gap coupled with using ScrollTrigger then I'm sure someone can assist. If so please provide an example / Codepen demo showing your responsive Three.js along with including your ScrollTrigger setup that is not working properly.

 

Sorry if things were misconstrued here in various ways, we are happy to have you here and wish you much success with this and all your projects using GSAP, ScrollTrigger, etc. 👍

  • Like 2
Link to comment
Share on other sites

@joxd As you brought up this thread again, I would like to use the opportunity to -
A) express my relive that that tone of voice has improved.

B) offer my two cents on the issue off accessibility in context with GSAP:

I'm all for keeping things accessible, and do argue here often to not overdue fancy stuff at the cost of accessibility. On the other hand, most of us want to give some extraordinary experience to users, being it for fancy or very sensible reasons. GSAP is primarily about motions, visuals and interaction. 

To best enjoy either you usually need to have stable vision as good (large enough) screen an often good hand-eye coordination. 
A lot of times what is beding done with gasp (no disrespect meant - to the contrary) is eye-cany. and only in a fraction of cases, information depends on the animation. 

In an ideal world, one would expect that for example a Tetris-like game should offer voice commands for people with movement disorders. But most of us have to earn their living with our work, and we will not get paid to do that in 99.9% of the cases.  

I'm totally on you side that we need to raise attention to the issue and to help finding workable solutions though.

My first approach to building almost anything for the public web is to make it work and look at least ok without any animation.
Also I try to take a lot of care on using good semantic structuring. 

Like with SEO, my experience however is that often those who focus very much on the topic tend to overdue the technical-side and  sacrifice the much more important content-side of things...
I will try to make better use of  prefers-reduced-motion  in the future regarding GSAP and I try to honor high-contrast user whishes.

 

I guess, that @GreenSock would probably accept a gues-authored blog article on how-tos regarding accessibility with GSAP as long as it is competent and friendly. I myself would gladly offer to help you with feed-back and suggestions, if you would want me to. 
The topic is important, and it deserves  better attention. 

If here is not the place for such an article - I'm sure a lot of websites or blogs would take it and one or the other link here still could further your goals.

 

Link to comment
Share on other sites

Hello @iDad5 -thank you too. Where I am coming from:

 

Here's the thing - my tone voice is often terse because we have an emergency situation with exclusion and exclusive design - exclusion is the opposite of inclusion and any inclusion and inclusive design starts with things like accessibility. This is way beyond seeing accessibility as people living with disability but.. Age, Gender Identity, Gender Expression, Gender Attribution, Biological ***, Sexual Orientation, Emotional Attraction, Physical Disability, Tech, Psychological Disability, Race and Heritage, Location, Religion and Spirituality, Personality, Education, Marital Status, Political Affiliation, Nationality, Hobbies, Appearance, Social Class, Language, Culture, Income, Life Experience, HIV Status, Housing Situation, Ability, Experience of Trauma, Working Style, Attractiveness, COVID19 Stigma and more.

 

And then there are intersections - for example living with disability, being trans and black and being included/excluded on all of those intersections. The question then is how can we include everyone into what we design and still make it delightful and functional with wonder and joy. I love reduce-motion and sure thing let's come with something on inclusion/accessibility j

Link to comment
Share on other sites

4 hours ago, joxd said:

It is responsive and all ok on desktop with resizing but the problem is on Mobile as on device orientation timeline resets for some reason 

I couldn't reproduce that issue. Is there a secret to making it happen? Are you seeing it in the CodePen you linked to? I checked on my iPhone and in Chrome's dev tools emulating a mobile device switching orientation. Seemed to run great. Nothing unexpected. 🤷‍♂️

Link to comment
Share on other sites

Yes, that's because when the address bar shows/hides, it changes the viewport size which forces a refresh() of the start/end values. If it didn't do that, positioning would be inaccurate. 

 

You can tell ScrollTrigger to skip that by setting: 

ScrollTrigger.config({
  ignoreMobileResize: true
});

 

Link to comment
Share on other sites

Yes, still figuring out device orientation and why when I scroll in portrait and flip it rewinds back to beginning. For some reason the portrait/landscape switch is making the animation to the start itself - so weird.

Link to comment
Share on other sites

  • 2 months later...
On 6/28/2021 at 11:24 PM, OSUblake said:

Here's a start. It might be better to ask on the three.js forums about how to do this, like how to advanced the progress/time without it auto-playing. We can really only offer guidance on GSAP's API. Three.js is a completely different animal.

 

 

this great way to clip an action then re-scrolltrgger it but im stuck for the last days in " how it will be managed if i want to scrolltrigger another animation in another section with this same model < i made tow actions but all im seeing is bug i wuld love to see help here guys  

 

 

Link to comment
Share on other sites

  • 2 weeks later...
On 6/28/2021 at 11:48 PM, OSUblake said:

i love to see this but im struggling with implment tow separate  animations in two separate sections , i succeed with only one 

 

let proxy = {
  get time() {
    return mixer.time;
  },
  set time(value) {
    action.paused = false;
    mixer.setTime(value);
    action.paused = true;
  }
};

 

 

 

 

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...