Here is an excerpt from where I have the conflict. Thanks for the support Zach and sorry for my slowness!
ironScroll.js Here are the timelines called in Main.js
export const iron1 = (model, material, tl, node) => {
const aboutTitle = node.querySelectorAll(".about-info-line > div")
const paragraph = node.querySelector(".about-info p")
tl.to(
material,
{
duration: 1.5,
ease: "expo.inOut",
},
"iron"
)
tl.to(
material.emissive,
{
duration: 1.5,
r: 1,
g: 1,
b: 0,
ease: "expo.inOut",
},
"iron"
)
tl.to(
model.position,
{
duration: 2,
x: 2.6,
y: -8.77,
z: -8.47,
ease: "expo.inOut",
},
"iron"
)
tl.to(
model.rotation,
{
duration: 2,
x: 0.39,
y: -1.09,
ease: "expo.inOut",
},
"iron"
)
tl.from(
[...aboutTitle],
{
duration: 1,
y: 44,
ease: "power3.out",
stagger: 0.15,
},
"iron+=.6"
)
tl.from(
paragraph,
{
duration: 1,
y: 20,
ease: "power3.out",
},
"iron+=1.4"
)
tl.to(
paragraph,
{
opacity: 1,
duration: 1,
ease: "power3.out",
},
"iron+=1.4"
)
tl.to(
[...aboutTitle],
{
duration: 0,
opacity: 1,
},
"iron"
)
}
export const iron2 = (model, material, tl, node) => {
tl.to(
model.rotation,
{
duration: 2,
x: 0,
y: -2.34,
z: -0.05,
ease: "expo.inOut",
},
"iron"
)
tl.to(
model.position,
{
duration: 2,
x: 3.47,
y: -7.1,
z: -13.27,
ease: "expo.inOut",
},
"iron"
)
}
Main.js
ironGeo.current and ironMat.current are the objects that the timeline will interpolate
import {iron1, iron2} from './ironScroll'
const animIron1 = gsap.timeline({ paused: true })
const animIron2 = gsap.timeline({ paused: true })
const contactWrapper = document.querySelector(".contact-wrapper")
iron1(ironGeo.current, ironMat.current, animIron1, contactWrapper)
iron2(ironGeo.current, ironMat.current, animIron2, contactWrapper)
ScrollTrigger.create({
trigger: ".sp-1",
start: "0 top",
markers: true,
onEnter: () => animIron1.play(),
onLeaveBack: () => animIron1.reverse(),
})
ScrollTrigger.create({
trigger: ".sp-2",
start: "0 top",
markers: true,
onEnter: () => animIron2.play(),
onLeaveBack: () => animIron2.reverse(),
})