Locomotive scroll integration

General
1

Hello,

I’m trying to implement Locomotive Scroll Locomotive Scroll | Detection of elements in viewport & smooth scrolling with parallax effects. within Pinegrow, but having trouble triggering Scroll Scene animations. When locomotive is active, none of the Pinegrow scroll scene interactions work.

Does anyone have any experience with it within the Pinegrow?
Any help would be greatly appreciated.

Thanks!

2

Hey @bergamot999,
Can you give an example of what you have tried? I searched the web a little and people have used GSAP and Locomotive, so it should be possible.
Cheers,
Bob

3

Hi @RobM

Thank you for the reply.

I have researched a bit before posting here, and indeed, it seems that people have used GSAP and Locomotive; however, I didn’t succeed with the methods that I’ve found, unfortunately. These methods included straight GSAP code, which is not how Pinegrow interactions work, and it seems that Locomotive doesn’t register interactions made with Pinegrow.

To explain a little better, here are two videos, one without Locomotive with interactions working and another with Locomotive scroll active but without the interactions.

locomotive’
non-locomotive’

Thanks!

4

Hey @bergamot999,
Without seeing actual code I can’t really troubleshoot much. I’m also not exactly sure from the videos what Interactions is supposed be contributing and what Locomotive is doing.
Sorry,
Bob

5

Hey @RobM

Apologies for not being completely clear.

This is just a quick prototype I created to test and show what’s not working, not too much code here. Just a few divs and basic styling with this Locomotive code injected to get a smooth scroll:

<script src="js/locomotive-scroll.min.js"></script>
		<script>
			const scroll = new LocomotiveScroll({
    			el: document.querySelector('[data-scroll-container]'),
    			smooth: true
			});
		</script>

In regards to videos, all visible interactions such as hero image parallax and text fade in effects were made with Pinegrow interactions, once the Locomotive is used, it disables all the interactions. I would like to use Locomotive just for smooth scrolling in this specific case.

Any help on how to combine the two would be greatly appreciated.

Thanks!