[Issue with mouseover or callback functions]

Amazing, always wondered about the timelines on GSAP but never really thought to dissect them. Thank you for sending that it's a great help to see it being used in something familiar, I can finally wrap my head around it.

[Issue with mouseover or callback functions]

Not sure what's going on here, could be the onComplete because I haven't used it before. But when I'm hovering some are sticking open when I've left the element and also sometimes they glitch out completely and just get stuck without the text and are no longer interactable.

 

I wondered if there was a check I could add see make sure the cycle completes and queues reverse or something similar? Or any other suggestions would be great

See the Pen ZEavpwW by shutt90 (@shutt90) on CodePen

[Issue with scrollTriggers loading late]

Hi Akapowl,

 

After racking my brain for a few days I've just stuck it all in a setTimeout before triggering any of the functions and giving it 100ms because calling them in and it seems to be working fin. Not sure if the issue was with my DOMContentReady having an issue with my string split and stagger but anyways the issue is solved. Thank you for your help, I'll certainly look into lazy: false in furture too

[Issue with scrollTriggers loading late]

I'm fetching data from the database but if I scroll too quickly as shown in the video the markers are stuck at the top of the page. I've wrapped it all in DOMContentLoaded, as well as went through the common mistakes and changed "top" to "0" but nothings working still. I don't think I can attach a full codepen for the issue but have attached one of my scrolltrigger calls.

Delay and stagger are arguments wrapped in the outer function which I've ruled out. Video is attached below.

 

EDIT* I've also added a loading screen and deactivated mousewheel event temporarily on page load as well as overflow hidden in a delay hoping that would fix it but still nothing

 

const digitalBlock = document.getElementById(block)

    let digitalH = digitalBlock.querySelector(childElement)

 

        digitalText = digitalH.textContent

     

        const digitalSplit = Array.from(digitalText)

        let newText = []

   

        digitalSplit.forEach(letter => {

            newText.push(`<span>${letter}</span>`)

        })

   

        const joinedString = newText.join('')

        digitalH.innerHTML = joinedString               

 

            gsap.from(digitalH.children, {

                scrollTrigger: {

                    trigger: digitalBlock,

                    start: '0% 70%',

                    end: '50% 10%',

                    toggleActions: 'play reverse play reverse',

                    markers: true

                   

                },

                y: 200,

                opacity: 0,

                stagger: stagger,

                delay: delay,

            })

 

https://liampugh.co.uk/ShareX/brave_na9egQn9A7.mp4

[Issue with movement on children text]

Switched it to divs and works great, thanks again Blake

[Issue with movement on children text]

I'm bringing in the content from a CMS and want to work with dynamic data so splitting the string and returning it back to work with children (top part).

Only issue is  for some reason it doesn't seem to be animating with the X: -200 or any X, Y entry call.

Wondered if anyone knew the reason for this? 

See the Pen OJOXPLw by shutt90 (@shutt90) on CodePen

[Closing all other elements]

So I'm using the same code and everything should be set up correctly but I keep getting 

 

Invalid property rotate set to 45 Missing plugin? gsap.registerPlugin()

 

I'm importing GSAP from CDN, with CSSRule and ScrollTrigger at top of file with my custom js file on defer, I also have other gsap further down the page with rotations thats working fine with rotate. Also I had added the gsap.to(anim.... for debugging purposes so I think this could be the issue for it not working.

 

EDIT - managed to get it working, I was trying to rotate an svg/i from font awesome and it wasn't liking it so had to target the outer div

 

const skills = gsap.utils.toArray('.skills-container__inner');

 

const animations = skills.map(element => {

    const animation = gsap.to(element.querySelector(".skills-rotate"), {

      rotate: 45,

      reversed: true

    });

    console.log(element.querySelector('.skills-rotate'))

 

        element.addEventListener("click", () => {

       

            animations.forEach(anim => {      

            if (anim === animation) {    

                gsap.to(anim, {

                    rotate: 45,

                })    

                // toggle this animation

                anim.reversed(!anim.reversed());

            } else {

               

                // reverse all the other animations

                anim.reverse();

            }      

            });

        });

       

        return animation;

        });

[Closing all other elements]

Both are excellent solutions thank you.

Just having a slight issue getting it working with my full code.

 

[Modify the site]

I just came to say that, that's quite frankly one of the best looking sites I've ever seen tbh.

[Closing all other elements]

Not sure if this is considered a GSAP question tbh but I'm looking to close all other rotations in the loop when that's already open is pressed using vanilla JS. Becuause I'm in a foreach I'm not sure on the best way or if theres a special gsap way to do it. TIA

 

See the Pen wvqyEyb by shutt90 (@shutt90) on CodePen

[Uncaught SyntaxError: Invalid or unexpected token]

I deleted it and changed the order of the object variables and and somehow its working now. It's bizarre that it wasn't working in the first place though, a colleague had it working on his and it was the exact same

[Uncaught SyntaxError: Invalid or unexpected token]

Anyone know what could be happening here?

I can't see anything wrong with the formating or the CDN imports so not sure what else it could be