Jump to content
Search Community

ceescoenen

Members

  • Posts

    17

  • Joined

  • Last visited

 Content Type 

Posts posted by ceescoenen

    Blinking border and timeline question

    in GSAP

    Posted

    Hi, 

     

    I will make an attention with 5 text rows. After the 2nd tex row the 'datetime' box is blinking. 

     

    1. I can't get the blinking smooth. I have played with duration etc but there is a duration gap. 

    2. I have set the 3rd text row to start after 3 seconds instead of waiting the blink repeat. That works but the 4th text row wait on the blinking. I thought it would only wait on the 3rd text row.

    See the Pen ZEaYjQp by ceescoenen (@ceescoenen) on CodePen

    Lazy load effect on all sections or cards in websites

    in GSAP

    Posted

    Hi @Cassie, thanks for your answer. 

     

    Sorry to say, but it feel that I have to search to another platform to ask question about use cases. I thought I could ask on experience what I can archive with GSAP. There a so much possibilities that I sometimes search for a correct way to implementatie things. If it is possible to do make a codepen then I do, I will do. I have to learn a lot and I have paid for Creative Code Hub. So I do my best to learn. But I hope you understand that helping  people on the right road is also fine. But I think that is not how this forum works (?). 

    Two problems with animation (I am learning) SwiperJS and GSAP

    in GSAP

    Posted

    Hi,

    I am very new to GSAP. I have make a SwiperJS with inside a GSAP animation.

     

    Three questions:

    1. How can I prevent that the div is load before the animation is start (I have seen some options, but don't know what is the best)

    2. Why is the wrapper dive homepage-intro load direct? I want 2 seconds before load, like the other elements. 

    3. Is the code correct? I am struggling with the animation on the slider. 

     

    Thank for helping me!

     

     

    See the Pen MWENzZz by ceescoenen (@ceescoenen) on CodePen

    New to GSAP, help needed with GSAP inside a SwiperJS

    in GSAP

    Posted

    Hi @OSUblake,

     

    I have searched and found the solution. The only thing I don't know: is Stagger possible? Or maybe there is a better solution: 

    I have three elements that has to appear after each other. Maybe the first after 500ms, the second after 900ms and the third after 1500ms.

    Is it possible that you give me some hints?

     

    swiper.on("slideChangeTransitionStart", function() {
        gsap.fromTo(".homepage-intro", {
            y: 400,
            autoAlpha: 0
        }, {
            duration: 1,
            ease: "power4.out",
            y: 0,
            autoAlpha: 1
        });
    });

     

     

    New to GSAP, help needed with GSAP inside a SwiperJS

    in GSAP

    Posted

    Hi, 

     

    I will learn GSAP. I have a SwiperJS that loads 3 divs with images as a fade (first image, second image, third image).

    Inside each DIV I have add three other divs with the class .homepage-intro . 

     

     

    jQuery(document).ready(function($) {
       gsap.from(".homepage-intro",{
           y: "+=100",
           opacity: 0,
           duration: 1,
           stagger: 0.5
       })
    });

     

    The first time the slide loads with the animation. When the loop is round and the first slide loads again the animation doesn't work. What is wrong?

    Again, I have to learn GSAP and this is the first animation I try. You can see the slide here:

     

    https://staging.e-chopperleusden.nl/

     

     

    Simple opacity on images

    in GSAP

    Posted

    9 minutes ago, OSUblake said:

    Welcome to forums @ceescoenen

     

    Have you checked out our Getting Started guide? Go through that, and then check out a Timelines.

     

    Your animation sounds pretty straightforward. Just set the opacity of your images to 0 in your CSS, and then animate them in. 😀

      

    gsap.timeline()
  .to("#image1", { opacity: 1, duration: 0.75 })
  .to("#image2", { opacity: 1, duration: 1 })
  .to("#image3", { opacity: 1, duration: 1.25 });

     

    If you need anymore help, please put what you have in a minimal demo. 

     

    Thank you. This works but it isn't smooth. How can I make this more smooth?

     

    Simple opacity on images

    in GSAP

    Posted

    I am new and have see some examples. What I want is three vertical images that fade in each after each when the page is load. Maybe some movement, but my problem is how to do the opacity from 0 to 1 in 750ms, 1000ms and 1250ms when the page is load?

×
×
  • Create New...