Interaction fadeOutup and others not fading out on scroll

have send a mail to support with a link to a URL
Hi,

Don’t confuse the animation issue with the load immediately animation that is also applied to the text!

I reported this a long time ago, but when I create a text animation in for example a Jarallax parallax with fade out on page scroll like the preset fadeOutup the animation works perfect in Pinegrow, but not at all in any browser. The fade out part doesn’t work!

The scroll to top icon at the bottom of this test page was made 1 1/2 year ago in a other version and works with fade in and out on scroll!

David

It’s hard to know the context of the issue from the information in this post. From what I can gather you are trying to use Interaction - While scrolling the page to control the scroll to top button.

The best approach is to use the Scroll Scene to do that, because While scrolling goes from 0 to 100 over the duration of the whole page scroll. Instead you want to have the Scroll Scene trigger the fade in and out when certain scroll distance is reached.

Here is a quick working example:

@matjaz Hi,

Thanks for your reply! I have send a detailed email with online example to support! Your example has nothing to do with my issue. Made a Jarallax Parallax with animated text and part of the animation doesn’t work. Please read my mail!

David

@AllMediaLab is it about the Communicatie section?

That works fine in PG and in the browser. Note that Scrolling the page goes from 0 to 100 over the duration of the whole page scroll, so only a small part of the animation is visible. The best approach is to use the Scroll Scene.

Yes it’s the Communicatie part, the parallax image with text!

I wrote an other mail explaining that adding the scroll scene with start and end point did not work and asked for the steps needed in this particular animation. I have been reading the whole documentation over and over, but it did not help me further.

Can I add the scroll scene to this Interaction? Or do I have to start from scratch?

Using the Scroll Scene lets you control the animation based on the scroll position of the element.

In this case you can ass Scroll Scene to section.jarallax and then have it animate the inner .container. The tricky part is setting up the start and end of the scene. The settings shown in the photo work ok.

The .container is now animated from the Scroll Scene, so any previous scroll animation should be removed from the .container.

Hope this helps!

1 Like

@matjaz Hi,

Thanks for helping me out! The problem is that Pinegrow shows internal a perfect Interaction including scroll scene, but like I said before, but when I look in any browser the scroll scene doesn’t show!

Would it be possible to send you the files to have a look at what is going on here?

Regards,

David

@AllMediaLab Scroll Scene direction = auto sometimes causes issues. It is best to set it explicitly to Vertical. If that is not the issue here, send me the project to support address and I’ll take a look.

No that’s not the issue, I will send the project with wetransfer!

@matjaz Hi,

The files are uploaded!

Thanks,

David

The issue is resolved. To add useful information to this topic: please note that animations that are controlled by scrolling need to be defined directly on the Scroll Scene action, not on the Interactions action:

1 Like