Jump to content
Search Community

Make text pulse or flash on scroll

tibbster test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

 

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

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 });

 

 

 

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...