Umberto

Hi, I haven't done an example with codepen, because I would rewrite the same things I wrote in my first post, that's all. In any case I solved by reporting: .... {scrollTrigger: {trigger: ".example" ....... for my every animation. Thanks

I thank you for the answer. Yes, I entered the code incorrectly. this is the correct one: gsap.from(".zoomIn", { scrollTrigger: { trigger: ".zoomIn", scroller: "#js-scroll" }, duration: 1, autoAlpha: 0, scale: 10, ease: "power2" }); gsap.from(".zoomInLeft", { scrollTrigger: { trigger: ".zoomInLeft", scroller: "#js-scroll" }, duration: 1.5, autoAlpha: 0, scale: 8, x: "-500%", ease: "power2" }); gsap.from(".zoomInRight", { scrollTrigger: { trigger: ".zoomInRight", scroller: "#js-scroll" }, duration: 1.5, autoAlpha: 0, scale: 10, x: "500%", ease: "power2" }); Timeline is a great solution but I can't use it because I have to simplify the code for each animation for my users. I tried to simplify as you advised me: // SHORT gsap.from(".zoomIn", { scrollTrigger: ".zoomIn" ... }); But without trigger it doesn't work, maybe I missed something .... The solution I like the most is this: gsap.defaults ({scrollTrigger: ".whatever"}); but i didn't understand how to use it. Could you give me an example with the animations I posted above? Just to understand Thanks for your time

Absolutely, you have been very kind. ? Thanks

I hadn't thought about it, I apologize. Unfortunately I still struggle to use Gsap, but I will learn ... Thanks

Hi, I created a series of animations for my project like this: gsap.from(".zoomIn", { duration: 1, autoAlpha: 0, scale: 10, ease: Power2.easeOut }); gsap.from(".zoomInLeft", { duration: 1.5, autoAlpha: 0, scale: 8, x: "-500%", ease: Power2.easeOut }); gsap.from(".zoomInRight", { duration: 1.5, autoAlpha: 0, scale: 10, x: "500%", ease: Power2.easeOut }); Since I use Locomotivescroll and ScrollTrigger, for each animation I have to insert the ScrollTrigger string: gsap.from(".zoomIn", { scrollTrigger: { trigger: ".zoomIn", duration: 1, autoAlpha: 0, scale: 10, ease: Power2.easeOut }}); gsap.from(".zoomInLeft", { scrollTrigger: { trigger: ".zoomInLeft", duration: 1.5, autoAlpha: 0, scale: 8, x: "-500%", ease: Power2.easeOut }}); gsap.from(".zoomInRight", { scrollTrigger: { trigger: ".zoomInRight", duration: 1.5, autoAlpha: 0, scale: 10, x: "500%", ease: Power2.easeOut }}); As the code gets longer, you can insert the code: ....{ scrollTrigger: { trigger: ".zoomIn"....... once for all animations? Thanks

Hi, I was able to animate the text with Gsap and Swiper, with this: var swiper = new Swiper('.swiper-container2', { speed: 1200, parallax: true, pagination: { el: '.swiper-pagination', clickable: true, }, // If we need pagination navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, runCallbacksOnInit: true, on: { init: function () { zoomImage(this.$el); moveDownText(this.$el); }, slideNextTransitionStart: function () { zoomImage(this.$el); moveDownText(this.$el); }, slidePrevTransitionStart: function () { zoomImage(this.$el); moveDownText(this.$el); } } }); function zoomImage(sliderDOM) { const slideActive = sliderDOM.find('.swiper-slide-active, .swiper-slide-duplicate-active'); const imageSlide = slideActive.find('.slide-inner--image'); gsap.set(imageSlide, {x: 100, y: 50, opacity: 0, skewX: 30,}); gsap.to(imageSlide, {duration: 0, x: 300, y: 0, opacity: 1}); } function moveDownText(sliderDOM) { const slideActive = sliderDOM.find('.swiper-slide-active'); const slideCaption = slideActive.find('.slide-inner--info'); const oldActive = sliderDOM.find('.swiper-slide-prev, .swiper-slide-prev'); const oldCaption = oldActive.find('.slide-inner--info'); // out gsap.to(oldCaption, { duration: .3, ease: Power2.easeOut, startAt: { autoAlpha: 1 }, autoAlpha: 0 }); // in gsap.set(slideCaption, { autoAlpha: 0 }); gsap.to(slideCaption, { duration: 3, ease: Power4.easeOut, startAt: {autoAlpha: 0, y: "-150%" }, autoAlpha: 1, y: "4%", display: "block"}); } I tried to animate the image too and it works but I have the same problem as before, once the animation is loaded it doesn't repeat it. I modified the codepen example What's it like?

Hi, I would like to insert an animation of the text of my slides with Swiper. I tried to insert this: gsap.to (". box4", {keyframes: [ {duration: 1, x: 100}, {duration: 1, backgroundColor: "# f38630", delay: 0.5}, {duration: 1, x: 0, rotation: -360, delay: 0.5} ]}); and it works, but it doesn't reload the animation every time I browse with the slides. Is it possible to do something? Thanks

OK, i try. Thanks

I apologize. Here is the example. https://codepen.io/umberto/pen/BazqOzJ Also if you try to resize the page, the animations start. Really strange Thanks for your help Ps: With the measure of the codepen screen, it works. To see the error, enlarge the page and reload and then resize

Oops, I'm really stupid ..... Now everything works, but using LocomotiveScroll, there are these CSS classes html.has-scroll-smooth { overflow: hidden; } html.has-scroll-dragging { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .has-scroll-smooth body { overflow: hidden; } that do not start the animation. Do I need to add some strings? Thanks

Hi, to simplify I created a pen. If you load the page and wait 2/3 seconds and then scroll down, you will see that the animation has already started and is not waiting for a viewport. Thanks https://codepen.io/umberto/pen/BazqOzJ

The problem is here: Array.from(document.querySelectorAll('.grid__item-img')).forEach((el) => { const imgs = Array.from(el.querySelectorAll('img')); new hoverEffect({ parent: el, intensity: el.dataset.intensity || undefined, speedIn: el.dataset.speedin || undefined, speedOut: el.dataset.speedout || undefined, easing: el.dataset.easing || undefined, hover: el.dataset.hover || undefined, image1: imgs[0].getAttribute('src'), image2: imgs[1].getAttribute('src'), displacementImage: el.dataset.displacement }); }); I will look for a solution. Thank you for your time

Hi, I have a problem with animations. I tried this example, but when I load the web page the animation has already started and is not waiting for me to get to the exact point. how do i start it when i get to the scrolling point? Sorry for my English

Sorry but it's my first post. I'm sending you the link https://codepen.io/umberto/pen/pobONzg Thanks

I thank you for the answer. I tried to change some parameters but it doesn't work: var addEvents = function(){ var evtIn = "mouseenter"; var evtOut = "mouseleave"; if (mobileAndTabletcheck()) { evtIn = "touchstart"; evtOut = "touchend"; } parent.addEventListener(evtIn, function(e) { gsap.to(mat.uniforms.dispFactor, speedIn, { value: 1, ease: "power3.inOut" }); }); parent.addEventListener(evtOut, function(e) { gsap.to(mat.uniforms.dispFactor, speedOut, { value: 0, ease: "power3.inOut" }); }); }; if (userHover) { addEvents(); } window.addEventListener("resize", function(e) { renderer.setSize(parent.offsetWidth, parent.offsetHeight); }); this.next = function(){ gsap.to(mat.uniforms.dispFactor, speedIn, { value: 1, ease: "power3.inOut" }); } this.previous = function(){ gsap.to(mat.uniforms.dispFactor, speedOut, { value: 0, ease: "power3.inOut" }); }; var animate = function() { requestAnimationFrame(animate); renderer.render(scene, camera); }; animate(); }; How can I do?

hi everyone, I'm a new user and I wanted to solve a problem. I would like to include this type of hover animation in my project (https://tympanus.net/codrops/2018/04/10/webgl-distortion-hover-effects/), but still use TweenMax while I use version 3 of GSAP. how do i make it compatible with version 3? I post the script: var addEvents = function(){ var evtIn = "mouseenter"; var evtOut = "mouseleave"; if (mobileAndTabletcheck()) { evtIn = "touchstart"; evtOut = "touchend"; } parent.addEventListener(evtIn, function(e) { TweenMax.to(mat.uniforms.dispFactor, speedIn, { value: 1, ease: easing }); }); parent.addEventListener(evtOut, function(e) { TweenMax.to(mat.uniforms.dispFactor, speedOut, { value: 0, ease: easing }); }); }; if (userHover) { addEvents(); } window.addEventListener("resize", function(e) { renderer.setSize(parent.offsetWidth, parent.offsetHeight); }); this.next = function(){ TweenMax.to(mat.uniforms.dispFactor, speedIn, { value: 1, ease: easing }); } this.previous = function(){ TweenMax.to(mat.uniforms.dispFactor, speedOut, { value: 0, ease: easing }); }; var animate = function() { requestAnimationFrame(animate); renderer.render(scene, camera); }; animate(); }; Thanks