[GSAP zoom-out Animation with scrolltrigger]

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

See the Pen eYgvoGe by dhaliwallambi (@dhaliwallambi) on CodePen

[Animating elements with same class when each enter viewport with ScrollTrigger]

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:  (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();

 

[Animating elements with same class when each enter viewport with ScrollTrigger]

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: 

 

See the Pen qBNedNK by SahiljeetSingh (@SahiljeetSingh) on CodePen

[Magnetic Button with GSAP]

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: 

See the Pen pobRYqj by SahiljeetSingh (@SahiljeetSingh) on CodePen

[Image reveal while hovering on text]

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.

[Image reveal while hovering on text]

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!

See the Pen rrpzgW by RMKNGY (@RMKNGY) on CodePen