Jump to content
Search Community

JoeH

Premium

  • Posts

    57

  • Joined

  • Last visited

 Content Type 

Posts posted by JoeH

    DrawSVG - looping stroke animation around circle, slight jump at end of loop

    in GSAP

    Posted

    Thanks. I will check that out, I made it like that because in the dribble example I posted I noticed that the stroke always animates in the direction of the rotation, I couldn't think of any other way to do it. My finished animation has 2 rotations, and then each 3 parts are animated also.

     

    I'm sure I can do this with less code, but wanted to get it close to the Dribble example first, maybe the stroke animation can be done with one function, passing it the element and the starting position.

     

    See the Pen yLqZwJE?editors=1010 by orionJoe (@orionJoe) on CodePen

    • Like 2

    DrawSVG - looping stroke animation around circle, slight jump at end of loop

    in GSAP

    Posted

    Hi! hope you are all well.

     

    I'm creating a loading animation with an SVG.

     

    I have 1 of my 3 lines animating as shown in my codepen, my only slight issue is that when the loop goes from the last step to the first step the stroke jumps slightly, it's only subtle but I wanted to iron this out if possible.

     

    Also, am I right in thinking that I can't have more than one stroke animating on the same element? Basically I am creating something close to this -> https://dribbble.com/shots/5095383-Loader-Animation/attachments/10738727?mode=media

     

    What I have thought about doing is having 3 SVG eclipses in the same position, 1 for each of the 3 lines.

     

    See the Pen BaPMOXX by orionJoe (@orionJoe) on CodePen

    Scrollsmoother and modal

    in GSAP

    Posted

    On 4/10/2022 at 8:32 PM, GreenSock said:

    Hi @linkus - we've actually built in a solution in the next release that will let you activate it like this: 

      

    ScrollTrigger.normalizeScroll({ allowNestedScroll: true });

     

    You can preview the files at:

    Does that work well for you? 

     

    Thanks, this works great for me.

    • Like 1

    Scrolling stops suddenly near bottom of page when using ScrollSmoother, Bug on some devices?

    in GSAP

    Posted

    Here is my initiation:

      

    var smoother = ScrollSmoother.create({
  smooth: 4,
  effects: true,           
  normalizeScroll: true,   
  ignoreMobileResize: true 
})

    This problem is happening in browsers in which the address bar is always visible.

     

    Tried running ScrollTrigger.refresh() on a 1 second interval and that didn't help.

     

    It's going to take me a while to get a codepen setup I think, this issue only exists on one page on our website:

     

    I've tested it isn't related to the length of the page, I've removed all other JS unique to the problem page, this doesn't make any difference, and even removed individual sections from the problem page to see if they are causing the issue, in this case the gap at the bottom of the page between the end scroll position and the end of the page just gets smaller and smaller as more sections are removed.

     

    I've tried removing all the CSS from the problem page also and this doesn't help either, still unable to pinpoint where the issue is coming from.

    Scrolling stops suddenly near bottom of page when using ScrollSmoother, Bug on some devices?

    in GSAP

    Posted

    Hi.

     

    In answer to your questions.

     

    1. No

    2. No

    3. How can I do this please? I have run a setInterval function logging out ->

      

    window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop

    But when I scroll to the end the value is significantly less than  document.documentElement.scrollHeight or document.body.scrollHeight, but not sure if I am comparing the correct things here.

     

     

    Some other observations:

     

    I can replicate the issue in my browser if I 'toggle device toolbar' i.e. inspect element and click on the mobile devices icon so that the touch screen mode is simulated.

     

    But as soon as I click anywhere on the page (at which touch-action: pan-x; is removed from body) and then try to scroll again, I am able to scroll to the appropriate position on the page.

     

    Scrolling stops suddenly near bottom of page when using ScrollSmoother, Bug on some devices?

    in GSAP

    Posted

    This issue is only affecting some devices, the ones we have found that have an issue are Samsung  S22 Ultra using Chrome browser, Samsung browser and Firefox, and using an Amazon fire tablet with the Silk browser.

     

    The scrollbar does not reach the bottom of the page, not sure if this helps or not in diagnosing the issue, but the scroll bar will not move once it gets to a certain point (around 7/8 of the way down the page on this particular webpage), the point it reaches also changes if you refresh, allowing you to scroll slightly further.

     

    I have tried creating the smoother instance once the entire page has loaded and even adding a setTimeout function, but this does not work, and seems to break the pins and scroll triggers.

     

    I don't have a codepen although I can try set one up, or I can provide a link to the website in which it is happening on, but would prefer to not share this in public.

     

    Attached is a video showing the issue on mobile

     

     

     

     

    React, Scroll Smoother, navigating between pages/routes and the scroll position persisting

    in GSAP

    Posted

    5 hours ago, GreenSock said:

    Blake, I I understood @JoeH correctly, I think he actually WANTS the scroll to reset (go back to the top) on each route. So yeah, you could smoother.scrollTop(0) if you want, or if you're asking how to tell ScrollTrigger to forget any recorded scroll position, you can use ScrollTrigger.clearScrollMemory()

     

    Yes I do wish for this. I think where it may not be desirable for some websites is on a refresh of a page where it is normal for the scroll position to persist.

    React, Scroll Smoother, navigating between pages/routes and the scroll position persisting

    in GSAP

    Posted

    Hi,

     

    The issue is when navigating between pages/routes in React, if you for instance click an internal link, then when you arrive on the next page, the scroll position that you were in when you click the link has persisted.

     

    On the current site I am working on I am not too fussed if the page always loads at the top no matter what, so I have just added:

      

    useEffect(() => {
    smoother.scrollTop(0)
  }, []);

    On every page component.

     

    However if this is not desirable I was wondering what the proper or best way of dealing with this issue might be.

     

     

     

    ScrollSmoother parallax effects not initiating in React when navigating between routes

    in GSAP

    Posted

    Ok I seem to have fixed this actually, I was previously creating the ScrollSmoother instance in App.js, but I think this was running too early

     

    I moved the initiation of ScrollSmoother to its own component: 

      

    import React, {useRef, useEffect} from "react";
import {gsap} from "gsap";
import ScrollSmoother from "gsap/dist/ScrollSmoother";

export default function useScrollSmoother() {

  gsap.registerPlugin(ScrollSmoother);

  var smoother = useRef(null);

  useEffect(() => {

    smoother.current = ScrollSmoother.create({
      smooth: 4,
      effects: true
    })

  }, [])

  return {smoother}

}

     

    And then in the page component use:

      

    const {smoother} = useScrollSmoother({});

     

    You can then add effects for that page like:

      

    useEffect(() => {
    smoother.current.effects("img", { speed: "auto" });
  }, []);

     

    Sorry for spamming up the forum!

    • Like 1

    ScrollSmoother parallax effects not initiating in React when navigating between routes

    in GSAP

    Posted

    Wow great plugin and perfect timing for a project I am working on, blows Locomotive scroll out the water!

     

    I have got it working great in React apart from when I navigate between routes (react-router-dom), the parallax effects don't seem to initiate. Works fine when I refresh the page. The ScrollSmoother effect works fine in this regard.

     

    Does some kind of refresh need to be run possibly?

     

    Thanks

    "Scroller start" and "Scroller end" markers are not transforming.

    in GSAP

    Posted

    I'm working in React so this issue is gonna take me a while to replicate in codesandbox. I've been banging my head against the wall with this for hours, I can't get a pin to work, one strange thing about it is that the "Scroller start" and "Scroller end" markers are not transforming, when I scroll the page they move with it rather than remaining in a fixed position due to the transform css applied to them.

     

    There is a pin-spacer element being wrapped around the trigger correctly but like I said, nothing else is working, no transforms are being applied.

     

    I was hoping that someone might no an obvious reason why this might happen?

     

    If not I will create a codesandbox.

    ScrollTrigger pin, animate to center of section on click

    in GSAP

    Posted

    11 minutes ago, Cassie said:

    Hi there @JoeH,

     

    You've linked to one of our pens here, could you update this with your logic and click event so we can see what you're attempting a little clearer?

    Sorry yes.

     

    Here is my forked version. 

     

    As you can see if you immediately click the first section it works as it should.

     

    Click any other section and it expands, but I'm not sure how to animate it to be centered.

     

    See the Pen xxpqYOY by orionJoe (@orionJoe) on CodePen

     

     

    • Like 1

    ScrollTrigger pin, animate to center of section on click

    in GSAP

    Posted

    Hi,

     

    I was hoping someone might point me in the right direction.

     

    I am creating a horizontal scroll of various sections, see this for my basic setup - 

     

    My goal is to when someone clicks on one of the sections animate it to be full width, and center.

     

    I have animated it full width no problem by just doing

      

    function sectionClick(el) {
  TweenLite.to(el.target, {width: window.innerWidth})
}

     

    But I am not sure how to animate the pin so that it is centered.

     

    The end position should be the section is full width and only it is visible.

     

    Hope this makes sense.

     

    Thanks

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

    Pinned carousel, how to deal with fast scrolling

    in GSAP

    Posted

    Hi all,

     

    Looking for some advice please or maybe a link to an example which might help me with a problem I am facing.

     

    I have a pinned carousel, it is not using scrub, I simply want each slide in the carousel to transition once the user has scrolled a certain amount.

     

    Ideally it would work like this, user scrolls and first slide begins transitioning, while the slide is transition any further triggering of a subsequent slide via scroll would be somehow disabled until this slide had finished transitioning.

     

    The reason we need this is because the slide transition takes about 1.5 seconds, and if the user scrolls very fast it does not have time to transition through all the slides in the carousel.

     

    Thanks for any tips/advice

     

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