gsap

问题 I want to popup my footer thumbnailed one by one with staggerFromTo() property. Here is my HTML code. <div class="footer"> <img src="img/pic1.jpg" alt=""> <img src="img/pic2.jpg" alt=""> <img src="img/pic3.jpg" alt=""> <img src="img/pic4.jpg" alt=""> </div> Here is my js code: const footer = document.querySelector(".footer"); const tl = new TimelineMax(); tl.staggerFromTo(footer,1.5,{y: "-100px"},{y: "0%",stagger:0.2}) 回答1: You don't need this CSS. It's just to visualize the example! I hope I

问题 I have a very long landing page.I want to apply the animation(To make the car move on the road). The div with the background of the road is approximately in the middle of my landing page(I have to scroll down the page 9 times) I found the way to animate the movement of a car with the help of GSAP JS. But I have no idea how to make my animation work only when my viewport is focusing the div with the road. I tried to search for a particular "event", but I failed to find it. Can you help me to

问题 Is there a way to get Vue to wait for elements to leave a list before new ones enter? At the moment, the animation for new elements entering the list plays at the same time as the animation for elements leaving the list: var SPEED = 3; var app = new Vue({ el: '.container', data: { nodes: [ {id: 0, value: 5, name: "Alan"}, {id: 1, value: 15, name: "Bob"}, {id: 2, value: 25, name: "Charles"} ] }, methods: { enter(el, done) { var bar = $(el).children(".bar"); TweenMax.fromTo(bar, SPEED, {width:

问题 I have this code with which I hope to make myself understood. gsap.registerPlugin(ScrollTrigger); ScrollTrigger.defaults({ toggleActions: "restart pause resume none", // markers: true, }); let square = gsap.timeline({ scrollTrigger: { start: "top center", end: "200px 100px", toggleActions: "restart none reverse none", //markers: true, scrub: true, trigger: ".square1", toggleActions: "restart none reverse none", }, }); square.from(".square1", { autoAlpha: 0, duration: 3, }); square.from( "

问题 I have this code with which I hope to make myself understood. gsap.registerPlugin(ScrollTrigger); ScrollTrigger.defaults({ toggleActions: "restart pause resume none", // markers: true, }); let square = gsap.timeline({ scrollTrigger: { start: "top center", end: "200px 100px", toggleActions: "restart none reverse none", //markers: true, scrub: true, trigger: ".square1", toggleActions: "restart none reverse none", }, }); square.from(".square1", { autoAlpha: 0, duration: 3, }); square.from( "

问题 I have 4 divs stacked each with an img background covering the viewport, and I have a parallax effect (with GSAP) that moves the images at a different speed than the scrolling as I scroll down. This works fine on all devices except iOS : after deployment, while it still works perfectly on desktop and Android, the images don't scale down on iPhone so I see a clipped portion of my images, zoomed in. I'm aware there's an issue with background-size:cover and background-attachment:fixed on iOS,

问题 I made this parallax scrolling. Using tweenmax library. Right now scrolling is calculated for whole page, so by the time I reach parallax elements, they moved a lot, I need to start calculating scrolling only after parent #wrap comes to viewport. HTML : <div class="asd"></div> <div id="wrap"> <div class="scroll-parallax-1 a"></div> <div class="scroll-parallax-2 b"></div> <div class="scroll-parallax-3 c"></div> <div class="scroll-parallax-4 d"></div> <div class="scroll-parallax-5 e"></div> <

来源： https://stackoverflow.com/questions/61606904/can-svelte-be-used-with-scrollmagic-gsap

来源： https://stackoverflow.com/questions/61606904/can-svelte-be-used-with-scrollmagic-gsap

来源： https://stackoverflow.com/questions/53250119/scroll-magic-section-wipe-height-issue