Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Guest

Play gltf animation based on scroll

Go to solution Solved by OSUblake,

Recommended Posts

Some of the examples found in the thread may also assist you in some way.

 

  • Like 2
Link to comment
Share on other sites

43 minutes ago, Shrug ¯\_(ツ)_/¯ said:

Some of the examples found in the thread may also assist you in some way.

 

Oh that's very nice example , but i mean i want to load an existing animation from blender on scroll , like i want to man run on scroll , i wish i can explain 

Link to comment
Share on other sites

27 minutes ago, Lolia Trafam said:

animation from blender on scroll

Maybe the links in this post will also help you some. ¯\_(ツ)_/¯

Link to comment
Share on other sites

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.

 

See the Pen PomoJNN by GreenSock (@GreenSock) on CodePen

 

  • Like 1
Link to comment
Share on other sites

  • Solution
23 minutes ago, OSUblake said:

how to advanced the progress/time without it auto-playing.

 

This seems to work, but I don't know if that's the best way to do it. Again, the three.js forums might be able to offer up a better solution.

 

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

 

See the Pen PomoJNN by GreenSock (@GreenSock) on CodePen

 

 

  • Like 4
Link to comment
Share on other sites

  • 1 year later...

This is not working: 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). 

Link to comment
Share on other sites

28 minutes ago, joek said:

This is not working: 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). 

Hi @joek. We really try to keep these forums focused on GSAP-specific questions (please see the forum guidelines) - did you have one of those? 

 

This sounds like more of a Three.js question. If you need GSAP-related help, please make sure you include a minimal demo and we'd be happy to take a look. 

  • Like 1
Link to comment
Share on other sites

What kind of UX is this - aren't you supposed to be helpful and empathetic towards (us) users - this is the GSAP related issue that is not accessible nor it is responsive because the above simply does not work. Is GSAP Forum not an inclusive space then? The above solution does not work and it should not be here if it does not help. 

Link to comment
Share on other sites

Hey there Joe,

 

Sorry that this has got off on the wrong foot. We do endeavour to help people as much as possible in these forums. If you look through this thread, the initial demo is a user created demo that we have tried to give advice and suggestions on. 

It's not an official GSAP 'how to' demo - it's a demo made by someone in the community over a year ago.

Many demos in the forums are just from people experimenting, they aren't finalised examples, they're the remainders of people working out solutions in public. They remain up despite being imperfect as they provide an invaluable 'jumping off point' and contain huge amounts of helpful information.

As Blake said a year back
 

Quote

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.


We're not withholding help maliciously - it's purely that the rendering side and the progress value that's being animated are all to do with three.js. GSAP is just animating a value. We're more than happy to help with questions about how to tweak the ScrollTrigger values or easing or anything else in this demo that's down to GSAP itself, but the rest of the code is three.js and not authored by us.

We try to make the forums an inclusive space and help where we can, but we also try to nudge people towards resources and communities that can be of more use when our own knowledge is lacking.

  • Like 2
Link to comment
Share on other sites

Thank you Cassie - exactly, your tone of voice is - the way it should be. Thank you. I was directly pointed at the door (to the three js forum) and guess what - threejs did the same on their forum - to come here. Isn't this the perfect example how inclusion and accessibility is holding you back to really go mainstream and large with adoption? I can tell you that the problem is at GSAP end - threejs is resizing and updating responsiveness for viewports but GSAP animations are off and are jumping. And @Cassie - yes but what is the purpose of such experimentation on here if it isn't accessible? Or thinking of accessibility as an afterthought - it shouldn't be just experimenting for the sake of experimenting but accessibility must always come first and then the fancy stuff imo. j

Link to comment
Share on other sites

I'd just like to gently point out that respect gets extended here in both directions. We have forum guidelines for a reason and we're used to people coming into these forums, giving a friendly intro, explaining their problem and giving us an example to work from.

You jumped into a year old thread without a question or an introduction - just a terse statement in bold that a demo was broken. Being bumped around forums isn't fun, but it would have been great if you had led with that, maybe provided us with a link to the thread and a little context. 

I'm also not really certain what you mean by accessibility in this context, the issue here is seemingly with canvas re-rendering and animation progress, neither of those are anything to do with accessibility.

Quote

1. when you resize your viewport - on mobile for landscape/portrait is broken - down to rendering - three.js
2. it is not responsive - down to rendering - three.js
3. Animation does not keep its progress


 

2 hours ago, joek said:

what is the purpose of such experimentation on here if it isn't accessible? Or thinking of accessibility as an afterthought - it shouldn't be just experimenting for the sake of experimenting but accessibility must always come first and then the fancy stuff imo.

The threads here haven't been curated to provide accessible, responsive, completed, bug free demos for future developers to copy. They're support forums, people posting are just trying to get help with particular bugs or issues in their project. There are a huge variety of demos here all in various stages of 'done', many broken, next to none are production ready and accessible and responsive.

Worth noting too that we don't have an issue at all with mainstream adoption. GSAP is used on roughly 11,000,000 sites, many of them award winning. GSAP and three.js are just ingredients in those sites though, a small part of the final product. You can combine three.js and GSAP to create endless exciting things, but the part that brings them together is custom written JS. The developer is the chef, not us!

Anyway - Pop over that thread you started on the three.js forums and between us and them we'll take a look and see if there is actually an issue we can help to smooth over. 
 

  • Like 1
Link to comment
Share on other sites

Thank you @cassie  

June 28, 2022
EU member states are required by the EAA to pass necessary accessibility laws by June 28, 2022. Every company that does business in the European market is affected by this directive and must prepare by making internal modifications to the way they operate.
 
 
-- J
 
 
 
Link to comment
Share on other sites

I am starting to like GSAP more j

Link to comment
Share on other sites

Sorry to hear. Well. I've run many a workshop on accessible animation - Canvas animations like this are inherently inaccessible as they're little black boxes of javascript - which is usually pretty innocuous as most things occurring in canvas containers are decorative so they don't really need much more than a little fallback content or an ARIA label popped onto the element.

 

Accessibility still doesn't really have anything to do with the question you asked. Nor is that demo, GSAP itself, or three.js violating any accessibility guidelines in the slightest. I'd love to help but it's still unclear what it is you want help with. Your post history over on the three.js forums is equally terse and lacking in real actionable information.

We wish you the best! You're always welcome back, but please leave the attitude at the door next time.

  • Like 1
Link to comment
Share on other sites

The WCAG requirements for “Reflow" and “Orientation" are Level AA criteria

 

Link to comment
Share on other sites

We're very happy to help with any GSAP related questions but it's not feasible for us to provide completed working examples of all the codepens provided by users in these forums, especially if the issues arise at the intersection of other third party tools and custom code.

 

If you'd like to understand more about three.js there are lots of great courses out there. This is one of the most popular.
https://threejs-journey.com

Good luck with your learning journey.

  • Like 1
Link to comment
Share on other sites

I too am quite confused by all your posts here and how you are seemingly misrepresenting the responses that you have received here in this thread on the GreenSock forums? ¯\_(ツ)_/¯

 

3 hours ago, joxd said:

This is not working: 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). 

 

You were asking about responsive tendencies then switched your entire feedback and arguments to accessibility. The feedback and advice you have been given has been correct as has been the initiative to try and help you through asking for pertinent information on what you are hoping to accomplish along with your own relative demo. None of which you have chosen to provide.

 

In the end both responsiveness and accessibility are up to the individual developer to implement based upon project requirements and expectations regardless of using GSAP or Three.js or any other web stack. 99.9% of the examples you find on this forum answer specific GSAP logic questions and do not encompass the full spectrum of development requirements, nor should they.

 

2 hours ago, joxd said:

threejs did the same on their forum - to come here

 

 

You mentioned that the Three.js forum was unkind to you and sent you here? Though the only relative recent posts relating to the same topic that I can see over there are the following, in which no responses were given, nor was that user ever directed to these forums.

 

These comments specific to your initial comment above (none of which received a response on the Three.js forum):

https://discourse.threejs.org/u/peet88/activity

 

Recent overall GSAP threads / posts:

https://discourse.threejs.org/search?q=gsap%20order%3Alatest

 

The problem with injecting into an old thread that was already answered correctly for that logic requirement, is that you have now changed the scope of the thread which it never intended to address. So it’s immensely difficult to assist when a person just points to other peoples examples, threads, discussions and simply gives the blanket claim that something does not work. When this occurs there is rarely enough relative context to move forward with this approach and provide concise answers.

 

The GSAP forums are some of the friendliest most helpful developer / code related forums you will find on the internet. GreenSock products are innovated and supported on a level rarely matched. So it’s really disheartening that you have chosen to misrepresent the sincere responses which you were given and make claims in response that simply are not accurate or true.

  • Like 3
Link to comment
Share on other sites

 

Good vibes only from now on

 

 

Link to comment
Share on other sites

Let's work together to clarify a few things...

  1. I don't think anyone is faulting you, @joxd, for pointing out that the user-created demo isn't fully responsive. Resizing screens appears to cause it to render oddly. Perhaps we haven't acknowledged that adequately and you didn't feel heard. 
  2. We are not Three.js experts here. Most (if not all) of the issues here are related to rendering, so it's really not in our wheelhouse. We're not in a position to dig in, learn Three.js and fix some else's demo for them to make it fully responsive. But we're happy to answer any GSAP-specific questions.
  3. It may not be obvious to you from your experience in this particular thread, but this community bends over backwards to help users around here and we spend hours and hours every day trying to keep up with the constant stream of posts. It can be overwhelming, especially when so many of them end up having very little to do with GSAP. Quite a few people basically expect us to provide free general consulting services and do their development work for them or solve logic issues in their code...and they often won't even bother to provide a clear minimal demo. These forums cost thousands of dollars every month to operate, so we have to draw boundaries somewhere. We get questions that are specific to Three.js, React, Vue, Angular, Next, Nuxt, Barba, Pixi, Swiper, LocomotiveScroll, ASScroll, ScrollBar, WordPress, Elementor, and Svelte, just to name a few. We simply cannot learn all of those tools and provide full support. I'm sorry if my initial boundary-setting post came off as rude or unwelcoming. I definitely didn't mean it that way. 
  4. Though you probably didn't mean it this way, your responses have come across as very disrespectful and insulting. It sounds like you felt similarly about some responses you got. So everyone got a little offended and salty here. Let's just put an end to that and give each other the benefit of the doubt. 
  5. Thanks for being a customer back in 2017. We sure appreciate that. We couldn't do what we do without the support of Club GreenSock members. 
  6. As a company, we place a HUGE amount of value on earning trust and treating customers with respect. One of the biggest ways we try to be there for our users is via these forums. We hear over and over again about how special this place is, how it is warm and welcoming, etc. It has taken years of very intentional effort to cultivate that. We don't have big marketing budgets or corporate sponsors - we simply focus our efforts on creating the best tools we can and supporting them well, trusting that the market will reward the efforts. Again, I'm sorry if your experience didn't reflect that. Let us know what it'd take to right the ship in your eyes.  

If you still think there's a GSAP problem at play here, how about if you create a minimal demo that doesn't use Three.js and only focuses on the animation-related challenge instead? I'd be glad to look at that and provide advice. 

  • Like 3
Link to comment
Share on other sites

Thank you @GreenSock - there was a miscommunication as in the EU Accessibility is becoming compulsory and portrait/landscape matters with AA. I didn't switch to accessibility as I thought it was inferred that it's the same. User needs to be able to experience it on portrait and when they flip to landscape it should stay the same (as in the animation progress stays the same). The intention was to use GSAP and provide accessible experience. In the end I was going to promote GSAP. It's not personal and please do not take it personally. I also apologise for being frank and direct and if this comes across as rude, I apologise. What could help is maybe more curation - and topics that matter - accessibility could be one. Something that goes beyond engineering and how technology can help people and enrich their lives. Information being delivered to people in a way that is accessible, inclusive, green, sustainable, delightful and in ways that it helps people. Thank you.

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.
×