Jump to content
Search Community

flowen

Members
  • Posts

    87
  • Joined

  • Last visited

Posts posted by flowen

  1. so I know there's element._gsap.rotation for example.

    But it returns a string like '1.234deg'. 

     

    Is there an easier way to 'get' inline styles (set previously by gsap). 

     

    why:

    I've set random rotations

    on click, want to turn rotation back to 0 

     

    I can't seem to find anything in the documentation (was expecting to see it @ CSSpluggin)

     

    thx!

  2. Thanks for sharing the solution and how you got there. 

     

    It's been a while, but it was like this:

    Drew the shape in illustrator.

    Imported the svg into figma

    There I flattened the paths to a single vector and exported from here

  3. const debugMultiplier = 1;
     
    gsap.defaults({
    ease: 'power2.in',
    duration: 1 * debugMultiplier,
    });

     

    🤦‍♂️

     

    edit: where did the delete forum-post function go? 

     

    Obviously this wouldnt work with any animations with a different duration than default

  4. so.. a technique that's quite common for debugging is just multiplying the animations duration to slow down the animation and debug it that way. 

     

    Now with es6 imports/exports and having different animations in different files, it can be a bit annoying to manage these variables. 

     

    I was wondering if there's perhaps an internal variable to multiply durations. 

     

    Otherwise would suggest to add one to the gsap.defaults() function which simply multiplies the duration. 

  5. heya dear greensocks 🧦

     

    Look at my beautiful prototype image:

    proto.thumb.jpg.9664c322fefe44fb6cb89c8faf1bd39a.jpg

     

    So I was thinking of making an image gallery where the front (current) image loops to the back of the gallery and the other images move forwards. While looping through this, the active image will enlarge a bit (forgot to include that in my amazing prototype) and when it loops back, becomes smaller. To give a simulation of depth. 

     

    Now I'm also thinking in terms of performance of course. The stacking order of images could probably hinder performance as they'll cause a lot of composite layers (may be using the wrong terminology here). I wonder if webgl is necessary perhaps.

     

    Technically I'm struggling how to do create this loop. I'm thinking of using a virtual scroll, track the y-value and update the progress. Perhaps this could be done with a gsap timeline that receives the progress variable in .totalProgress().

    Then there's the animation itself, would probably be done best with a bezier curve I assume. 

     

    I wonder if anyone made something similar and can perhaps give me some pointers if this is feasible or if it's gonna be really hard to be executed. 

    Or some feedback from a design perspective whether this is something that looks great in my mind but really ugly in the browser :)

     

    thx for reading!

    • Like 1
  6.  

    Trying to install virtual-scroll package, was really surprised to see that it was trying to fetch it from greensock.com instead of npm. 

    What could I do to fix this? 

     

    yarn add virtual-scroll                                     master  ✭
    yarn add v1.22.5
    warning package.json: No license field
    [1/4] 🔍  Resolving packages...
    [2/4] 🚚  Fetching packages...
    error An unexpected error occurred: "https://npm.greensock.com/virtual-scroll/-/virtual-scroll-2.1.0.tgz: Request failed \"500 Internal Server Error\"".

  7. 1 hour ago, ZachSaucier said:

    We believe that this issue should be fixed now. Can you all please try uninstalling GSAP then installing it via the private npm registry as specified in the installation instructions?

    uninstalled the .tgz, installed using the instructions, works perfectly!

    • Like 2
    • Thanks 1
  8. 18 minutes ago, ZachSaucier said:

    I haven't really used either much but I have had to help more people with Yarn-related issues in these forums so that's a big negative :) Looking at Yarn's GitHub repo and seeing almost 2,000 open issues is also a big red flag to me. Yarn also seems split over version 1 and 2. Plus the documentation for both is lacking, at least for less-common use cases.

    ah! Interesting too know. Coincidentally, I also use Nuxt 2 on this project so another reason for me to keep using Yarn. 

     

    I've personally never had problems with either npm or yarn, but perhaps I'm not enough of a power-user :)

    I suppose in the meantime the best way to use gsap3+bonus tools is to install locally, right?

  9. for me its:

     

    yarn upgrade-interactive --latest

     

    that's it ;)

     

     

    honestly I don't do much with these tools apart from just installing and upgrading. 

    @ZachSaucier which makes me curious! what other uses do you use npm for and what other features are important for you?

    • Thanks 1
  10. 4 hours ago, akapowl said:

    Edit:

    Actually just setting the killing to .kill(false) seems like the way better approach 😅

     

    
    ScrollTrigger.getAll().forEach((trigger) => trigger.kill(false));

     

    That prevents the animations from being reverted:

     

    To prevent the animation from being reverted when it is killed, simply pass false as the parameter. For example ST.kill(false).

     

    https://greensock.com/docs/v3/Plugins/ScrollTrigger/kill()

     

     

    oh nice! wow, great find, thank you so much!

    What made you look at the kill method? 😁

  11. 2 hours ago, akapowl said:

    Hey  @flowen

     

    If you rip out everything that is related to the smooth-scroll library that you are using, you will notice that it works as intended.

     

    So it probably is an issue related to that and not to ScrollTrigger.

     

    https://codesandbox.io/s/magical-cherry-czdy9?file=/smoothscroll.js

     

    My guees would be, that the .disable functionality of that library is maybe not enough, and the instance would have to be completely destroyed and re-initiated instead when transitioning - but that is just a wild guess, because I don't know a thing about that library.

     

    Hope this helps somewhat, though.

     

    Cheers.

    Paul

     

     

    Thanks Paul for having a look, really appreciate!

     

    Tonight I will have a closer look at the smoothscroll's API and see if that offers a solution.

     

    I quickly checked your fork and noticed that when you scroll down (on home) and then click on contact, the model still slightly resets before it transitions to the next page. Not as much as before but it still does unfortunately. So perhaps there is still something that related to scrolltrigger? 

     

     

  12. CodeSandbox

     

    It's quite a bit of code, but let me guide you. I'm quite sure I located the code that's causing the problem(s). I'm just not sure how to fix it.

     

    Problem

    When browsing between pages, the model's position and rotation values start from (or reset) to a different value. 

     

    When I remove the timelines from the file (described below), it all works properly. So my hunch is I'm doing something wrong regarding the creation of timelines/scrolltriggers or perhaps the removal of them. Perhaps the timeline get's stuck somewhere or scrolltrigger thinks it's being scrolled to the top perhaps? 

     

    home/createScrollTriggers.js

    Here I create a timeline with a scrolltrigger for the index/home page. Created dynamically based on html data attributes. 

     

     

    Update:

    What I tried:

    I tried moving the timeline to the highwayjs renderer. 

    I tried removing the dynamic creation of the timelines.

    I tried using scrollTrigger.create() methods vs a timeline.

     

    None of it worked and I still have no clue why the values keep reseting. I'm also not sure how to trace where things are going wrong.

     

     

    I'm so stuck on this. I have no clue what I can try 🤔

     

     

  13. 15 hours ago, ZachSaucier said:

    Hey flowen. You've got quite a bit going on in that sandbox. Can you please try to strip out everything that's not related to your question?

    ah I understand. Is it okay if I refer you to the code instead? 

     

    Controller.js

    init()

    r74-75 a gsap.set for initial settings

     

    intro()

    r88 intro animation

     

    createScrollTriggers()

    r155 here I create a timeline based on the `data-scroll-trigger` attributes in the index.html

    So I loop through each attr and based on the data-name add to the timeline that contains the scrolltriggers.

     

    If this isn't clear I don't mind creating a new one at all ✌️

     

     

     

     

  14. 👇

     

    See the code here

     

    What am I doing wrong here? I basically took the code from the codepen example form the docs

     

    the _toArray is a reference to gsap.utils.toArray but not sure how that could help me .

     

     

    also I was wondering about the following:

    why in the example codepen is there a variable totalScroll to calculate the scrollHeight? 
    It's only set on 'load' but never set again after. Still even though I resize the screen it works perfectly.. Magic 🤘

     

    See the Pen PoZRwPW?editors=0010 by ashthornton (@ashthornton) on CodePen

×
×
  • Create New...