Jump to content
Search Community

momo12

Members

  • Posts

    124

  • Joined

  • Last visited

 Content Type 

Posts posted by momo12

    Does gsap.to and scroll trigger have a stagger?

    in GSAP

    Posted

    1 hour ago, Rodrigo said:

    Hi,

     

    I encourage you to go through the documentation of Scroll Trigger, since all you issues are actually mentioned and explained there:

     

    👆That is exactly what the enter back does, is intended to work like that. It means that the scroll trigger end point has passed and now is being scrolled back, as the user scrolls back up.

     

    👆This is what scrub is for.

     

    Hopefully this is helps: 

    gsap.registerPlugin(ScrollTrigger);
gsap.set('.img', {scale: 0});
gsap.to(".img", {
  scale: 1,
  stagger: 0.15,
  scrollTrigger: {
    trigger: ".section-2",
    start: "top top",
    end: "center 20%",
    scrub: true,
  }
});

     

     

     

    Happy Tweening!!!

    Thanks man. I got confused yesterday. With your example I understand this better! Thanks a lot

    • Like 1

    Does gsap.to and scroll trigger have a stagger?

    in GSAP

    Posted

    Hi,

     

    I need a help. I have two elements with the same class-name which appears on scroll. I use scrolltrigger.batch but is there a way to use the normal scroll trigger and gsap.to / and inside gsap.to we set the stagger?

     

    ** The problem I have here is if we don't scroll all the way down to the bottom of our trigger (when it ends), the animation does make problems when we enterBack! The enter back won't work unless we scroll down first time and reach the end point.

     

    ** Another issue why the animation will be triggered without considering the scroll percentage? I mean I want to scale up the boxes according to the scroll position, not trigger the animation at once. In other words, the animation will run but I want it does a normal job if we scroll 50%, the boxes scale up 0.5 and if we scroll 100%, they reach 100% of their desired scale.

    See the Pen PoeKrmo by talewoy290 (@talewoy290) on CodePen

    Stagger is not working

    in GSAP

    Posted

    9 minutes ago, Rodrigo said:

    Hi,

     

    It is actually working, we just can't see it ;) The issue is that it starts from the first image that is at the bottom of the stack of images. But lucky for us GSAP has advanced staggers that help you with this: 

    el.addEventListener("mouseover", (e) => {
  gsap.to(".first", {
    scale: 0.5,
    duration: 0.6,
    stagger: {
      each: 0.1,
      from: "end"
    }
  });
});

     

     

     

    Happy Tweening!!!

    Thanks man. You are a GSAP super hero. 

    Detect the number of clicks and run play() accordingly

    in GSAP

    Posted

    Sorry guys,

     

    I have a few gsap.timelines(); I want to animate something when user clicks on a button for the first time (It will use A as GSAP.timeline()) and if user clicks on a button for the second time (It will use B as GSAP.timeline()).

     

    The problem I have is what should I do if user clicks continously? Third and fourth and ...! I use this code but doesn't work for some reasons! 

    var clicks = 0;
$(".m-btn").click(function() {
    if (clicks % 2 == 0)
    {
         tl.play("spin");
    } 
    else
      {
          tl.play("spinn");
      }
     clicks++;
});


    Found the problem! Added GSAP a few times caused the issue :)

    GSAP Custom cursor is not moving enough!

    in GSAP

    Posted

    2 hours ago, Rodrigo said:

    Hi @momo12,

     

    If you want for the element to be where the pointer is all the time, then just use a set() instance or a really short duration (less than 0.1)

     

    Happy Tweening!!!

    The reason it doesn't work was the "Wrong initial position" of the mask div. I came up with a custom solution. changing a few pixels(100px) the current position of the cursor and assign it to the X and Y values of the mask.

    GSAP Custom cursor is not moving enough!

    in GSAP

    Posted

    20 minutes ago, geedix said:

    If you mean the mask is moving too slowly, then you could specify a shorter duration for your tweens, like  

      gsap.to($middlemask, {
    x: e.clientX,
    y: e.clientY, 
    duration:0.2
  });

    - it's just using the default 0.5 right now. But maybe that's not what you mean?

    @geedix It stays behind the cursor.

    Use GSAP for mouse reveal

    in GSAP

    Posted

    57 minutes ago, Trapti said:

    Hello,

    I modified the pen. Hope you find this helpful.

     

     

     

    Or as a reference use this remove the zooming part and add opacity 0 to the main image.
     

      

     

    Thanks for sending this over. I'm not sure how this even works :( Could you please make an easier example like my codepen? So, I can learn that? I'm not good at coding and just learning.

    Newbie - help with animation

    in GSAP

    Posted

    On 9/4/2022 at 9:48 AM, thomasbeck said:

    On load, first image is visible on the left. On the right, I can see the 3 texts. Only the first one have opacity to 1, others have 0.3.

    On scroll, second image shows, first text opacity change to 0.3 and the second text goes to 1 and so on.

    I hope it's more understandable

    Use Locomotive Scroll for having a smooth scroll (If you're not a premium user). Honestly, this kind of animation works better when the scroll is smooth

     

    You can set the initial state of the texts in css. Change them by using a Gsap.to(). Put each text inside a div. So, you can animate the text colors by detecting the wrapper of each text. 

     

    Thanks to GSAP you don't need to be a powerful developer! It's amazing :)

    Hover even listener doesnt work with GSAP

    in GSAP

    Posted

    36 minutes ago, Rodrigo said:

    Hi,

     

    The issue is that you're using querySelector and not querySelectorAll. The querySelector method returns the first element it finds with the passed selector and then stops looking. The querySelectorAll.... well returns all the element it finds :D

     

    This should work as expected: 

    var hover = document.querySelectorAll(".sss");

hover.forEach((el) => {
  el.addEventListener("mouseenter", (e) => {
    gsap.to(cursor, { scale: 0.5 });
    gsap.to(cursorBorder, { scale: 2 });
  });

  el.addEventListener("mouseout", (e) => {
    gsap.to(cursor, { scale: 1 });
    gsap.to(cursorBorder, { scale: 1 });
  });
});

    Also you have  missing slashes in some closing tags:
      

    <div class="section-1">
  <div class="img-1 sss"><div><!-- HERE -->
  <div class="space-wr"></div>
  <div class="img-2 sss"><div><!-- HERE -->
  <div class="space-wr"></div>
</div>

    Happy Tweening!!!

    @Rodrigo Sorry I have a simple question. The hovering doesn't last and sometimes the circle becomes small like there is no hover. 

    Hover even listener doesnt work with GSAP

    in GSAP

    Posted

    3 minutes ago, Rodrigo said:

    Hi,

     

    The issue is that you're using querySelector and not querySelectorAll. The querySelector method returns the first element it finds with the passed selector and then stops looking. The querySelectorAll.... well returns all the element it finds :D

     

    This should work as expected: 

    var hover = document.querySelectorAll(".sss");

hover.forEach((el) => {
  el.addEventListener("mouseenter", (e) => {
    gsap.to(cursor, { scale: 0.5 });
    gsap.to(cursorBorder, { scale: 2 });
  });

  el.addEventListener("mouseout", (e) => {
    gsap.to(cursor, { scale: 1 });
    gsap.to(cursorBorder, { scale: 1 });
  });
});

    Also you have  missing slashes in some closing tags:
      

    <div class="section-1">
  <div class="img-1 sss"><div><!-- HERE -->
  <div class="space-wr"></div>
  <div class="img-2 sss"><div><!-- HERE -->
  <div class="space-wr"></div>
</div>

    Happy Tweening!!!

    You're an angel! Thanks man!

    splitText with GSAP for pararaph

    in GSAP

    Posted

    19 minutes ago, Carl said:

    This sounds a bit like one of my lessons. Perhaps this demo will help

     

     

     

     

    It's got a bit extra going on to make the text "unsplit" on resize and also re-init devtools. 

    I'm doing a character-by-character animation on each line which is why I have to loop through each line.

     

    If you need to learn more about how this is set up give the courses in my signature below a look

    Thank a lot for your explaination! 

    splitText with GSAP for pararaph

    in GSAP

    Posted

    Hello guys,

     

    I have a question. Let's say we have a pragraph. How can I reveal each line using Stagger (I want to add delay to the bottom lines) and SplitText? The thing is I want the div block which contains each line, masks the initial state. So, the lines wouldn't be visible by default.

    Use GSAP Stagger to animate the scale of the same elements

    in GSAP

    Posted

    4 minutes ago, Rodrigo said: 
    cursor

     

    52 minutes ago, Rodrigo said:

    Sorry I though you wanted to stagger the dots when they entered the white box, not as they followed the cursor.

     

    There are two approaches I can think of, create a timeline with a fromTo instance for the scale and another to instance (that starts at the same time) for the scale: 

    function cursorMover(e)
{
  gsap.timeline()
    .fromTo ($cursor, {
    scale: 0.5,
  }, {
    duration: 0.3,
    stagger: 0.05,
    scale: 1,
  })
    .to ($cursor, {
    x: e.clientX,
    y: e.clientY,
    duration: 0.3,
    stagger: 0.05,
  }, "<");
  gsap.to ($cursorHover, {
    x: e.clientX,
    y: e.clientY,
  });
}

    The other approach is to create a set instance and a single tween to handle both the position and the scale stagger: 

    function cursorMover(e)
{
  gsap.set($cursor, { scale: 0.5 });
  gsap.to ($cursor, {
    x: e.clientX,
    y: e.clientY,
    duration: 0.3,
    stagger: 0.05,
    scale: 1,
  });
  gsap.to ($cursorHover, {
    x: e.clientX,
    y: e.clientY,
  });
}

    Test both and see which one is the best for what you intend to do.

     

    Happy Tweening!!!

    Thanks a lot for your help! Your answer helped me to understand what I was doing wrong. 

    Use GSAP Stagger to animate the scale of the same elements

    in GSAP

    Posted

    42 minutes ago, Rodrigo said:

    Just use stagger in the same way you're using it in the follow code: 

    function cursorHover(e)
{
  gsap.to ($cursor, {
    scale: 0.5,
    stagger: 0.15,
  });
  gsap.to ($cursorHover, {
    scale: 3,
  });
}

function cursor (e)
{
  gsap.to ($cursor, {
    scale: 1,
    stagger: 0.15,
  });
  gsap.to ($cursorHover, {
    scale: 0.001,
  });
}

    Play with the stagger values until you find the ones that look better.

     

    Happy Tweening!!!

    It still doesn't work. The all cursors are the same. do you think I'm doing something wrong? I'm looking to create a tail for the cursor and as you know, the tip is always smaller.

    Cusstom start/end position for Scroll Trigger

    in GSAP

    Posted

    17 hours ago, Rodrigo said:

    Hi and welcome to the GreenSock forums!

     

    You have to access the properties of the trigger element, most specifically the clientHeight property 

    // Use one of these
const endPoint = (box.clientHeight * 0.6);
const endPoint = (parseInt(getComputedStyle(document.documentElement).fontSize) * 5) + (box.clientHeight * 0.7);

gsap.to("#box", {
  x: 200,
  scrollTrigger: {
    trigger: "#box",
    scrub: 1,
    start: "top center",
    end: endPoint,
    markers: true,
  }
});

    Finally the syntax you mention ("+=500") means 500 pixels after the start point, which is mentioned in the ScrollTrigger docs.

     

    I encourage you to go through the docs and codepen examples to find out more about ScrollTrigger:

    https://greensock.com/docs/v3/Plugins/ScrollTrigger

     

    Finally this is a great resource to get started with ScrollTrigger:

    https://www.creativecodingclub.com/courses/scrolltrigger-express?ref=44f484

     

    Happy Tweening!!!

    Thanks a lot! I just started learning this amazing library!

    • Like 1

    Cusstom start/end position for Scroll Trigger

    in GSAP

    Posted

    Hello guys,

     

    I have 3 questions.

     

    1- How can I tell ScrollTrigger to end the scroll animation when 60% of the div height has been scrolled up?

    2- How can I tell ScrollTrigger to end the scroll animation when (70%+5em) of the div height has been scrolled up?

    3- Also, another question: I saw this format somewhere: end: ="+500" what does this mean?

     

    this is the one I have used but didn't work. 

    ScrollTrigger.create({
  trigger: ".s2-wr.projects",
  scroller: ".sections-wr",
  start: "40em 0%",
  end: 'center+=100px center',
  markers: true,
  scrub: 0.2,
  onEnter: () => gsap.to('.s2-wr.projects', {
    backgroundColor: "#ffffff",
    duration: 0.2,
  }),
  onLeave: () => gsap.to('.s2-wr.projects', {
    backgroundColor: "#000000",
    duration: 0.2,
  }),
    onLeaveBack: () => gsap.to('.s2-wr.projects', {
    backgroundColor: "#000000",
    duration: 0.2,
  }),
  onEnterBack: () => gsap.to('.s2-wr.projects', {
    backgroundColor: "#ffffff",
    duration: 0.2,
  }),
});

     

4
5
Page 5 of 5  
×
×
  • Create New...