Make text pulse or flash on scroll

[tibbster]

Hi all,

 

I come form an after effects/design background. Javascript and web animation are fairly new to me. 

Using scrollmagic and gsap I'm trying to make the text, highlighted in red, flash(or do something) when the user scrolls past it.

 

So far I've tried:

Adding a new tween and timeline just for the pulsing words.

Looked at the position parameter but that doesn't seem to work, maybe because the duration is controlled by scrollmagic scenes?

 

I'm not sure what else to try was hoping that someone on here could offer some suggestions?

 

Thanks

 

See the Pen XWbbdXm?editors=0010 by iontiberiu (@iontiberiu) on CodePen.

[ZachSaucier]

Hey tibbster and welcome to the GreenSock forums!

 

ScrollMagic isn't a GreenSock product and we don't really support it here. Intersection observers are perfect for this sort of thing! 

 

Sorry, I'm on mobile or else I'd sure you with your demo, but these threads should be able to help you (there are others as well if you search "GSAP intersection observer" on Google):

 

[tibbster]

How rude of me, I forgot to reply to your helpful comment.

 

First of all, thanks for pointing me in the direction of Intersection Observers. It is something I'll look at exploring for future projects.

 

I can appreciate ScrollMagic is not supported on these forums. I thought it was a good idea to use the 2 libraries together since the ScrollMagic docs recommend GSAP. Anyway, I saw some posts about it in the past so thought it was ok to ask. Sorry!

 

In case anyone is interested: I ended up adding a "highlight" tween to each timeline and used the positioning parameter on other tweens to better control the speed at which the animations play when scrolling. In the end the highlight functionality was dropped anyway ?‍♂️

 

tlPurpose4
        .from(document.querySelector('#scene--purpose4 .img-responsive'), { scale: 1.4, x: -300, ease: Linear.easeNone })
        .from(document.querySelectorAll('#scene--purpose4 .copy > *'), { y: 100, opacity: 0, ease: Linear.easeNone }, '<')
        .to(document.querySelectorAll('#scene--purpose4 .highlight'), { color: '#000', background: '#c8d300', fontWeight: 'bold', padding: '0 0.4rem', yoyo: true, repeat: 1, ease: Linear.easeNone });