dhaliwallambi

I want to create animation with scrolltrigger just like the animation on this website. (animation of word "Bridge" in the beginning of this website) https://bridgelanding.qodeinteractive.com/tour/ Thank you

In my Portfolio, I'm using the ScrollTrigger with Locomotive Scroll, (The code is below). I'm a newbie in JS. So, When I try to use batch method, locomotive scroll and everything with scrolltrigger breaks. It would be great if you can write some syntax for me (Just the batch method). Codepen: https://codepen.io/SahiljeetSingh/pen/qBNedNK (I don't know why it isn't working on codepen, but this syntax (without batch method) works on my computer). gsap.registerPlugin(ScrollTrigger); // Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll const locoScroll = new LocomotiveScroll({ el: document.querySelector(".data-scroll-container"), smooth: true, smoothMobile: true }); // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning) locoScroll.on("scroll", ScrollTrigger.update); // tell ScrollTrigger to use these proxy methods for the ".data-scroll-container" element since Locomotive Scroll is hijacking things ScrollTrigger.scrollerProxy(".data-scroll-container", { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; }, // we don't have to define a scrollLeft because we're only scrolling vertically. getBoundingClientRect() { return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; }, // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element). pinType: document.querySelector(".data-scroll-container").style.transform ? "transform" : "fixed" }); let exptl = gsap.timeline({ scrollTrigger:{ trigger: ".z-out", start: "top 85%", end: "top 5%", scrub: 2, markers: true } }); exptl.from(".z-out", { x: 100, opacity: 0, duration: 1 }); // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc. ScrollTrigger.refresh();

Hello, I want to animate images with same class when each of them enter the viewport. I've 5 images in my codepen each with a class 'z-out'. My JS is let exptl = gsap.timeline({ scrollTrigger:{ trigger: ".z-out", start: "top 85%", end: "top 5%", stagger: 1, scrub: 2, markers: true } }); exptl.from(".z-out", { x: 100, opacity: 0, duration: 1 }); The problem is when the 1st image enters the viewport, the animation happens for all the images. So, When I scroll further animation is already occured. I'm using this for my portfolio, I want to animate the some images with a common class when each enter the viewport. I don't want to create multiple classes and a tweens for each of them. Codepen: https://codepen.io/SahiljeetSingh/pen/qBNedNK

Hello Guys, I found this codepen, I wanna use this effect on the links in my portfolio but the problem is I don't want my link to be enclosed further in an element. I don't want to create an extra div enclosing my link like this codepen has. I don't want this: <div class="container"> <div class="circle"> Hover</div> </div> I want this: <div class="circle"> Hover</div> Regards, Codepen: https://codepen.io/SahiljeetSingh/pen/pobRYqj

Codrops has many examples but it's way complex for me. Can we change or assign empty img tag a class. So, that the script does not affect other img tags in html. If we assign a class "image-reveal" to that empty img tag and add that class to the code in css, But I don't know how to make changes in JavaScript and replace the img tag with a img tag with specific class.

Hello Guys, I want to know to get this effect. Many websites have these. When we hover on a piece of text, images pop-up and when we move away from text, they disapper. Well, the major drawback for me is that I don't know the javascript at all! But I'm great at html&css. I just want a simple effect, image pop-up and move along as we move the cursor on text. I'm sharing the websites which have these effects. I'm including a codepen which has this effect but the problem is, when implement that javascript into my website, it has a part, this on const image = document.querySelector('img') This select all the img tag and I don't even why it has an empty img tag in the beginnning of html. It would be great, if you can help me in any way. https://www.craig-reynolds.com/ https://normal.studio/en/ Thanks & Have a great day!