Hide div before visible

[jvr]

Hi GSAP's! 

 

I have 2 <section>'s.

 

As the vistor scrolls, I'd like to fade in the second section.

On that second section, there's a hyperlink.

 

The problem:

The hyperlink is already clickable before the second section is visible.

Please hover the bottom area of the first (green) section on my CodePen URL to see what I mean.

 

Is there a way to activate the hyperlinks as soon as the second section is completely visible?

 

Thanks in advance

See the Pen GqvaYw by jvr (@jvr) on CodePen

[Shaun Gorneau]

There are a couple of ways to handle this. First and foremost would be to use Javascript to intercept the click action on the <a> with event.preventDefault() so that it does nothing (most likely with an if statement that is looking at your timeline position). When you've reached a point or past in your timeline, that would allow the click to bubble up. The second step would be (with Javascript) to add a class to the <a> for which the rule would be cursor: default. This would prevent the expectation that the area is clickable. When you've reached a certain point in your timeline, you can remove that class ... at which time the <a> would return to the default cursor presentation.

 

And I'm saying use javascript to set these states so that in the event javascript isn't available (either disabled or error), the <a> is usable.

[Jonathan]

Hello jvr, and Welcome to the GreenSock Forum!

 

You can try and do this with a timeline using TimelineMax or TimelineLite.

 

See the Pen oLGgqb?editors=0110 by jonathan (@jonathan) on CodePen

 

And use the CSS pointer-events property to prevent the firing of your anchor tag unless the tween before it is complete

 

Instead of using a GSAP onComplete special property. I am just allowing GSAP to run each tween in the TimelineMax sequentially.

1. runs a zero based tween which uses the set() method to apply pointer-events: none to disable the <a> tag
2. run your from() tween
3. then run another zero based tween using the set() method to remove the pointer-events CSS property via clearProps

// create new Timeline
var staggerFormule = new TimelineMax();

staggerFormule
// add the pointer-events CSS property with none to prevent JS and CSS pseudo-states
.set('a[href="#link"]', {
  pointerEvents: "none"
})
// main tween
.from("#second", 1, {
  opacity: 0,
  marginTop: '-350px'
})
// remove pointer-events CSS property
.set('a[href="#link"]', {
  clearProps: "pointer-events"
});

var controller = new ScrollMagic.Controller();

// create a scene
new ScrollMagic.Scene({
    duration: 350, // the scene should last for a scroll distance of 100px
    offset: 150 // start this scene after scrolling for 50px
})
.setPin("#second") // pins the element for the the scene's duration
.setTween(staggerFormule)

.addIndicators()
.addTo(controller); // assign the scene to the controller

Resources:

GSAP TimelineMax: http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/

GSAp set(): http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/set/

CSS pointer-events: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events