I create my first animation in of updateWindow()
else{
animation = gsap.to(thisEl, {left: maxLeft, duration: props.duration, ease: Linear.easeNone, repeat: -1, delay: props.delay})
}
This is just a piece of all the code.
I'll try right now to provide a codePen
[EDIT:]
In the meanwhile I'll share all the component code down here, maybe it helps...
import React, {useEffect, useContext} from "react"
import {gsap, Linear} from "gsap"
import $ from "jquery"
import "../style/backgroundCloud.css"
function BackgroundCloud(props){
// Current element
let thisEl
// Refreshes the component
let isLoaded = useContext(props.pageLoaded)
// Maxiumum left attribute that the cloud must reach & animation
let maxLeft, animation
function updateWindow(evt){
// If it is the first execution update the left parameter and set currentHeight & currentWidth
if(!evt){
thisEl = $(`#${props.propId}`)
thisEl.css("left", -2 * thisEl.width())
}
// --> This code must be executed in both vertical and horizontal resize <--
maxLeft = 2 * thisEl.width() + $(window).width()
// Adapting cloud to new top
const parent = thisEl.parent().parent().parent()
const fromTop = parent.offset().top
const parentDistance = fromTop + parent.height() / 2
let top = props.top
if(top.includes("vh")){
top = top.replace("vh", "")
top = top * 0.01
top = $(window).height() * top
}else if(top.includes("px")){
top = top.replace("px", "")
}
thisEl.css("--top", String(parentDistance + top).concat("px"))
if(evt){
animation.kill()
animation = gsap.to(thisEl, {left: maxLeft, duration: props.duration, ease: Linear.easeNone, repeat: -1, delay: props.delay})
}else{
animation = gsap.to(thisEl, {left: maxLeft, duration: props.duration, ease: Linear.easeNone, repeat: -1, delay: props.delay})
}
}
// Exec when the site is loaded/the component refreshed
useEffect(() => {
if(isLoaded){
updateWindow()
$(window).off().on("resize", updateWindow)
}
}, [])
function killComponent(){
if(animation){
animation.kill()
}
}
// Return default cloud
return(
<div className="backgroundCloudContainer">
<img src={props.background} className="backgroundCloud" id={props.propId} draggable="false" alt={props.propId}
style={{
"--z-index": props.zIndex,
"--top": props.top,
"--scale": props.scale
}}/>
<button onClick={killComponent}>CLICK</button>
</div>
)
}
export default BackgroundCloud
I'm trying to replicate the same situation in JS but everything works fine.
So, maybe, the problem is with React