Jump to content
Search Community

yasserzakaria1993

Members

  • Posts

    22

  • Joined

  • Last visited

 Content Type 

Posts posted by yasserzakaria1993

    Enhanced type for quickTo return

    in GSAP

    Posted

    Thanks for the best amazing animation library ever
    I have just a small suggestion 

    Is it possible to change the return type for gsap.quickTo to be more specific than Function

    suggested type

    quickTo: (target: TweenTarget, property: string, vars?: TweenVars) => Function & {tween : GSAPTween}

    P.S. for sure this is not perfect and not getting all the properties but this is what in mind now

    Please guide me so I can properly contribute for small things like this in the future

    thanks again guys for the amazing effort 🙏

    Creating spiral animation

    in GSAP

    Posted

    Thanks @akapowl for the fast response

    In the provided example all the objects are starting the animation from the path start point

    but I have many objects that will touch the path in deferent points and need to start from this point

    do you know how to calculate the touching point 

    so I can animate from it to the end of the path rather that animation from 0 => 100%

    Sprite Sheet VS Video

    in GSAP

    Posted

    Hey @ZachSaucier

    thanks for your quick response, I appreciate it.

    the videos will be played one time ( no loop ), and it doesn't require any interaction from the user.

    in regards to the performance, I mean the loading speed and the use of site's resources.
    for example, we have a slider with 8 slides, and each slide contains 2 or 3 videos, all those in one page.

    the most important question is the browser (Desktop only) compatibility and rendering of videos, will I face any problem with that? all videos will be autoplay(muted).

    I heard that in some browser the user needs to click on video to play it if he use data to connect with internet ( not wifi ).

    Thanks

    Sprite Sheet VS Video

    in GSAP

    Posted

    Hi Guys,

    please checkout the attachments, 3 gifs to show you examples of the animation that I want to implement on the site.

    actually, those just a placeholder and the client will change them later.

    my question is, which is the best for the performance and compatibility? to implement them as videos or Sprite Sheet?

    FYI - In mobile devices it will be just image ( no animation required ).

    Thanks so much

    daniel-tolmachov-1-1.gif

    7898fab9af8e2032bca5321882e5031a.gif

    liquid-preloader_dribbble_v2.gif

    Problems with ScrollTrigger, smooth-scrollbars and Webpack

    in GSAP

    Posted

    Hello BEST Team ever,
    first of All, Thank you very much for this amazing work on GSAP 3 :D .


    I have weird issue when I tried to implement smoothscrolling with scrolltrigger.
    I'm getting this error in the console and the scrolltrigger is failing to trigger any animation with scrolling
    image.png.573620483147b6682fd266adc47a74cb.png


    I'm using this code to connect scrolltrigger with smooth-scrollbars 

    import Scrollbar from 'smooth-scrollbar';
import {gsap} from 'gsap';
import {ScrollTrigger} from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

export default () => {
  
  const scrollContainer = document.querySelector('[smooth-scroll-container]');
  
  const bodyScrollBar = Scrollbar.init(scrollContainer, {damping: 0.075, delegateTo: window});
  bodyScrollBar.track.xAxis.element.remove();
  bodyScrollBar.setPosition(0, 0);

  ScrollTrigger.scrollerProxy(scrollContainer, {
    scrollTop(value) {
      if (arguments.length) {
        bodyScrollBar.scrollTop = value;
      }
      return bodyScrollBar.scrollTop;
    },
  });
  bodyScrollBar.addListener(ScrollTrigger.update);
}

    By the way smooth-scrollbar is working very well

     

    sorry for the lack of proper info as I don't know how to address this problem properly.

    Thanks in advance

    animating using .from has weird behavior

    in GSAP

    Posted

    Hi guys

    I really happy with gsap3, and I was waiting for it for very log time 🤩,

    but I now facing a very weird problem

    I'm animating some labels with gsap timeline.from to make them appear one by one "a really simple animation"

    but opacity is animating from 0 -> 0.003 or 0.06
    also this is the same with scale from 0 -> 0.08 or something like this

     

    image.png.eaa14de11f8c1ccbc564eb7f00e87c04.png

     

    i'm using react-js but I don't think this is the problem

      

    useEffect(()=>{
  labelsRef.current && 
  tl
    .from(labelsRef.current.getElementsByTagName('mark'),{duration:1,opacity:0,stagger:1},0)
    .fromTo(labelsRef.current.getElementsByTagName('label'),{scale:0},{duration:0.5,scale:1,stagger:1, ease: "back.out(4)"},0.5)
},[labelsRef.current]);

    when I animate the scale by fromTo everything works perfectly

    Am I doing anything wrong ????

    Thank you very much :)

    See the Pen yLNVQXq?editors=0010 by mody-ydom (@mody-ydom) on CodePen

×
×
  • Create New...