Hi,
When trying to create the most simple animation SlideInLeft on scroll behaviour “Scrolling the Page” It seems that the scroll is synced with the movement of the div animation in a wrong way. How do I get a div sliding in from the left just when it’s visible in the view field during scroll even when you stop scrolling? The presets make no sense to me and editing doesn’t seem to help.
This is on Windows and Mac.
Looking for behaviour like this:
https://wowjs.uk/
Regards,
David
Scrolling the Page is totally a different interaction, which starts as you scroll.
To animate on scroll with total control we should use Scroll Scene interaction. We can set position for Start and End trigger and we’ll have much more setting for advanced interaction.
Thanks!
But is a trigger still needed and what trigger do I use?
Could you please give a full example?
You only need Scroll Scene applied for this one (to apply scroll based animation). You do not need other Interactions (main interaction action for this one). But if you need other interactions as well, like for click or anything else, you can use it. Scroll scene itself is the scroll trigger that depends on the scene (your elements).
If I only use Scroll Scene no JavaScript or Library is spit out by Pinegrow.
I have it working now! Had to remove all Pinegrow related files and then could activate Interactions again so all the JavaScript appeared again. Only the presets seem to be made for a low resolution screen like a HD laptop, because I need to tune the settings a lot to get a exactable animation on a 5 k screen.
@abirana
Thanks for your help! Unfortunately it’s not working proper and after save all animation were lost. When you delete something it’s not deleted this was also a issue a year ago. That’s why I stopped using it and using it with Sublime text gives save issues. I was not able to save from Sublime Text 4 and Saving from Pinegrow did not appear in Sublime Text.
Regards,
David
Hi David, I don’t think we’ve encountered issues while saving the files. Also delete restriction can be found on elements created dynamically. I hope you do not have tags which are not closed properly?
And changes should appear if you work on PG or with a code editor. Maybe it is best to refresh the page sometimes but it should appear in real time.
We have not encountered issues on those parts, but if you are sure and think those are bugs then do let me know. Sometimes minor mistakes can cause a lot of problem. Would be best to check your project for proper inspection of the issue.
Hi @abirana
removed the link
I created a example based on one of your beautiful templates. I had to change the animation “Edit Transition” “Set X” etc. in 400% for the right card, -400% for the left card and -300% for the center card to keep them out of sight at the beginning of the animation. Working on a iMac 5k screen.
The problems are:
When scroll down every time the page loads the animation doesn’t work. Only after scrolling again.
(Chrome and Edge don’t work but it works in Firefox and Safari iMac)
The cards are out of scroll sight before the animation is finished.
On the iPad the whole navigation menu moves to the right (you can test that in Chrome dev tools)
despite the fact that only desktop was ticked on in the panel! And I don’t understand why this can
happen anyway!
Made this example without Sublime Text 4 because is gives problems with save as I wrote before.
When I use WoW JS for example all pre-sets work out of the box and cross browser.
Regards & Thanks,
David
The way you did the animation is all good, maybe it’s not what you wanted but it is working exactly how you did it.
You’ve to understand the Wow.js is a library/plugin that does one specific thing and tries to make it easy for user with the use of very less code. But even if you need more customization, you have to tweak few things on it.
Where as Pinegrow with Pinegrow Interactions is like a code editor which provides tools for you to create web pages as you need, giving you the full editing control. It does have some pre-built libraries but those are additional features, which can help us even more. I mean, the difference is like hand made and machine made.
Building pages and adding simple animations are pretty easy on Pinegrow. But if you need advanced interactions/animations you’ll have take care for related things as well. Pushing elements here and there can cause issues like overlapping, hiding or viewport issues. So these are expected of how HTML/browser works, for these we’ve to work more on the elements and CSS.
And the main thing, it is best to go through the documentation Scroll Scene | Pinegrow Web Editor this will be very helpful to understand all the settings and make your base strong. You might also encounter some useful features, I missed some feature at first and went through the doc. With that feature I’ve made one good interaction page, might take a little time to make it public.
@abirana Thanks again!
But what about the fact that it doesn’t work on Chrome and Edge when you click this link?
removed the link
I’m not sure which links are you talking about but it is work with me.
Can you share me the recording?
@abirana
Can not upload the screen capture, because the file extension is not recognized!
You should be able to upload mp4 but if you can share the screenshot of the link atleast.
This is on Chrome not working as it should, but works on Safari and Firefox:
@abirana
It’s seems to be much work for the most simple animations and nothing works cross browser or at different screen sizes. That way I can better use the normal Greensock stuff, because it saves a lot of time.
With WoW JS you don’t have that problem. No matter if I look at a 5k screen or a HD laptop.
@AllMediaLab here is a quick example on how to reveal elements on scroll into view. Each element can use a different reveal animation, if needed.
Note, there are some issues with our SlideIn presets that causes them not to become visible if Hidden at Start. We’ll fix that. Workaround is to do Edit animation and set Auto opacity to 1 during the animation.
Also, use Hide at Start action to hide elements that need to be revealed. And to position out of view, vw unit is handy, it works for all screens.
Pinegrow online on fire 
Nice example using Pinegrow online for sharing code reproductions/visually 
Hi @matjaz
Thanks for confirming the issues!
Conrads to the dev team for the online Pinegrow app it’s looks fabulous! 
Regards,
David
