ceescoenen

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.

Is it possible to move a element between to differents id's or classes on a page? I have elements el1 and el2. The element arrow has to move from the position of el1 to el2. Usecase is an arrow to let see where people has to click.

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 (?).

Hi, What is the best way to make lazy-load effects on all sections and cards? When the section is coming in to the x% of the viewport. The question is more how to program this is a proper way. Give all the sections the same name? Or are there better solutions?

This is a question without code. I think about using GSAP to make a explanation timeline that shows where the user has to click. Is it possible to make some focus points and also possible when some points not in viewport but that the page auto scroll to the point?

Thank you @OSUblake!

Hi, I wil fade in the text1 class when it moves. I have set the whole class to hidden but then nothing happens. What is wrong with my code? Cees

Hi @Cassie, oke. Good to know. It works for now.

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!

Hi @Cassie, Yes I understand. I have to learn how I can do this samples on Codepen. For now it works.

Hi @OSUblake First thanks for the fast answer. A last question: the animation works. But only on pageload on the first slide it is there without animation. All others slides and loops works. Do you understand what is happen? Is the animation to fast there?

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 }); });

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/

@PointC sorry! I have try some settings and go to bed. I will look tomorrow

@PointC @Cassie You can see it here : https://staging.e-chopperleusden.nl/huur-je-fatmax/ I have only add the code from the first post on the page. gsap.timeline() .to("#image1", { opacity: 1, duration: 0.75 }) .to("#image2", { opacity: 1, duration: 1 }) .to("#image3", { opacity: 1, duration: 1.25 });