Jump to content
Search Community

Sascha Fincher

Premium

  • Posts

    29

  • Joined

  • Last visited

 Content Type 

Posts posted by Sascha Fincher

    dynamic property names

    in GSAP

    Posted

    Hi everyone,

     

    I am working on a color theme switcher at the moment, that is completely based on CSS custom properties. Normally I would tween those CSS variables like this: 

    GSAP.to(element, {
'--color-text': '#000'
})

     

    My problem is that the properties I am tweening will always be passed as variable to my color manager. E.g. 

    function({key, color}){
  GSAP.to(element, {
    key: color // key will contain a string with a custom property
  })
}

    I am sure I am missing something very basic, but cannot find a solution. Is the dynamic "creation" of a property from a string possible at all? Any hints would be appreciated.

    ScrollSmoother freaking out on touchmove

    in GSAP

    Posted

    Thanks guys. Just tested it out briefly. It still happens, but not as often as before. It happens 100% when doing the very first touchmove after page load. After that it sometimes happens, but only when doing movements from the visible browser area into the bottom tool bar and back up to the url bar. This happens not on every occasion. Still trying to find a pattern for this behavior. 
    I am currently on my phone only and will create a new test pen tomorrow to make sure there is absolutely no caching issue.

    ScrollSmoother freaking out on touchmove

    in GSAP

    Posted

    45 minutes ago, GreenSock said:

     

    So if you're messing with the <body> height so that it's matches the window.innerHeight, that won't natively scroll anymore, thus ScrollSmoother isn't triggered to translate the content. 

     

     

    Indeed I did mess with the body height and position, because I did not want the body to scroll (to prevent hiding the bars).  :)

    You did  understand my question very well and I do understand now that what I thought could be a solution to the initial problem I posted in the beginning of this thread will not work. Let's forget about this then :)

     

    In that case the problem in the first penis still valid: 

     

     

    You can also see it in one of your pens: 

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

     

     

    • Like 1

    ScrollSmoother freaking out on touchmove

    in GSAP

    Posted

    Quick update. I thought this issue was fixed by version 3.10.5, but apparently it was not.

    I was investigating a bit further and as you know the whole problem occurs because of iOS showing and hiding the navigation/tool bar.
    Now, by setting body to window.innerHeight and position: fixed, the bars on iOS will always show and not move. However, SmoothScroller does not scroll in this case. 

    My understanding is that the smooth-content is being Y translated when scrolling, so why does a 100vh (or rather window.innerHeight) body with position:fixed prevent it from scrolling? 

    smooth-content gets an inline-style of position: absolute and when I do a normal css transform it moves as expected. However, the matrix3d transform that is applied by ScrollSmoother does not update when scrolling. Is this behavior intended by design?

    ScrollSmoother freaking out on touchmove

    in GSAP

    Posted · Edited by Sascha Fincher
    update on investigation

    Ok, tried it out now. Even in the simple codpen it does not make a difference.

     

    One more observation: On iOS 15 you can choose in the Safari setting if you like to have single tabs (url bar on top) or a tab bar (url on bottom). The whole problem only appears to happen when the url bar is on top.

     

    In both scenarios the browser is hiding the bar(s) after a bit of scroll, but it seems only to be a problem when the top and the bottom bar needs to be hidden.

     

    ScrollSmoother freaking out on touchmove

    in GSAP

    Posted

    Hi everyone,

     

    I know there has been a lot of discussions lately about ScrollSmoother and iOS/Safari, but I still could not find a solution to my problem.

     

    I only see this happening on  iOS 15.4.1 on Safari. 

    To see this effect you need to run the pen in debug mode.

    When you touch down on the screen and start scrolling (with your finger down) really fast beyond the top of the viewport (basically to the very top of the url bar), the whole content disappears and reappears only when releasing your finger.

     

    On the page I am developing this effect is even worse with the menu bar jumping wildly  around, but you can see the effect in the pen as well, although I only included the bare minimum to reproduce the effect.

     

    Edit: This behaviour goes away when I disable normalize scroll. However, I actually like what the flag offers. Thinking about disabling it based on device detection, but this is never a stable solution since I do not know which devices would have that problem. 

     

    See the Pen JjMVXEB by HankJamesMoody (@HankJamesMoody) on CodePen

    SplitText best practice for timeline creation

    in GSAP

    Posted

    Hi,

     

    This is more a general question and not a problem.

     

    I am creating a slider animation which is also using SplitText and I could use some advice on how to optimize it.

     

    During a slide change I run a couple of animations and one of those is a SplitText animation. What I am currently doing is:

    • do the splitting up front for all the text in alle the slides when my slider initializes
    • create in and out timelines and save them in an array
    • play the respective timelines once a slide is selected

     

    It's working perfectly fine. However I am asking myself if it would be better to calculate everything on the fly. So basically create the in- and out-timelines and the splitting on slide change. This would probably have the advantage of less memory usage and I would not have this totally cluttered DOM all the time. It would also allow me to do a revert() after the animation is finished. The only thing I am not sure about is the performance impact.

     

    Maybe anyone has a  best practice advice on this?

    Helper function Seamlessly loop / Snap to middel possible

    in GSAP

    Posted

    Hi everyone,

     

    I am trying to create a dragabble seamless loop and came across the helper function in the docs. However in my case the items in the loop are of different widths and I  always want the item that is closest to the middle of the wrapper to snap exactly in the middle position. I played around with the configuration object, but I cannot get it to work.

     

    Is this at all possible with the current implementation of the helper function? 

    See the Pen ZEaNWpN by HankJamesMoody (@HankJamesMoody) on CodePen

    scrollerProxy in node environment not working as expected

    in GSAP

    Posted

    3 hours ago, GreenSock said:

    My only other guess is maybe you're setting up a scroller proxy in one environment that's contaminating another(?). For example, if you tell ScrollTrigger that for the main <body> it should use a proxy (so that you can leverage LocomotiveScroll), and then in the same app (still in the browser, no refresh), you've got ScrollTriggers set up on the <body> it'd still be trying to pull that data from the LocomotiveScroll(?) I'm just taking shots in the dark here. 

    Not sure I fully understand what you mean.

     

    In  main.js (common code) I initialize loco scroll and set the scroller proxy to my smooth scroll container.

    In home.js (page specific code) I just use scroll trigger and pass the smooth scroll container to "scroller:"

     

    I can see the markers in the DOM being attached to the smooth-scroll container, but they are not moving at all.

     

    scrollerProxy in node environment not working as expected

    in GSAP

    Posted

    Having an issue with scrollerProxy which I don’t understand.

     

    Hi all,

     

    I am using ScrollTrigger and Locomotive Scroll in a node environment

     

    My structure is the following:

     

    main.js (this code will be used on all pages of the website)

    • import gsap
    • imports scrolltrigger
    • imports locoscroll
    • initializes locoscroll 
    • initializes the scrollerproxy
    • exports the scroller proxy

    --> scrolltrigger working just fine

     

    home.js (this code is only being used on the home page)

    • import gsap
    • import scrolltrigger
    • imports the scroller proxy (value “.smooth-scroll”)

     --> scrolltrigger NOT working. E.g. all markers move with the scroll. It seems like the scroller proxy is not recognized. When I copy the same code to main.js it’s just working fine.

     

    Does anyone have an explanation for this?

     

     

     

     

     

    Animate SVG filter feDisplacementMap / scale on scroll

    in GSAP

    Posted

    18 minutes ago, Cassie said:

    Hey Sascha!

    This was a puzzling one. scale in this case is an attribute so you have to set it up a little differently as (I think) GSAP is trying to animate the transform scale instead of the attribute scale.
     

     


    I don't get the same error as you, but I've tweaked the pen and included a simplified tween to show the difference between scale and attr scale

     

      

    // simplified example - scale doesn't work - attr does
gsap.to('#displacementMap', {
 'scale': 50,
 attr: {scale: 50}
})

     

    Thank you so much, Cassie. I spent literally two days on this and couldn't figure it out.

    • Like 1

    Animate SVG filter feDisplacementMap / scale on scroll

    in GSAP

    Posted

    14 minutes ago, Cassie said:

    Just an FYI - animating the displacement scale on ALL the images at the same time is gonna be real hefty on performance. If you're set on filters I'd try to find a way to only apply it to the images shown in the viewport

    Thanks, Cassie. The codpen was just a simplified version of what I am trying to accomplish. I will only apply the effect when the image is in view, but event this might be too costly, especially because the effect will be dependent on scroll. I will need to test this out.

    Animate SVG filter feDisplacementMap / scale on scroll

    in GSAP

    Posted

    Hi everyone,

     

    I am trying to recreated the effect on this site by animating the scale of an svg displacement map (you need to press and hold the mouse button to enter the list of images): https://yuto-takahashi.com (I know this has been done with WebGL, but I do not know enough about shaders and Three or Pixie to replicate it like this)

     

    My starting point is this codepen: 

    See the Pen eYpGLYL?editors=0010 by GreenSock (@GreenSock) on CodePen

     

    However I cannot get my head around the correct usage of the quickSetter when trying to animate the scale of feDisplacementMap, since scale of an sag filter is not a standard property. I also tried the attributePlugin, but with no luck,. 

     

    When calling the quickSetter in the codepen I see the following error in the console: InvalidCharacterError: The string contains invalid characters.

     

    After trying for two days now to get this to work, I thought maybe someone could point me in the right direction.

     

     

    See the Pen bGRNXzW by HankJamesMoody (@HankJamesMoody) on CodePen

1
2
Page 1 of 2  
×
×
  • Create New...