"Pinned" Scroll Animations — Am I missing something?

Pinegrow Interactions Add-on
1

Hi,

I was playing with some the Pin option - but, to me it seems it doesn’t work. Could @abirana please make a simple screen cast showing the most basic Pinned animation with the latest release of Pinegrow?

Thanks

2

I’ve also reported the problem with Pin with @matjaz after discussing a potential UI overhaul.

I always resort to writing code for pinning.

1 Like
3

Hello Hello,

Thanks for your feedback.
Can you (@tytusie and @fakesamgregory ) send a simple sample project (where you face the issue with the Pinned scroll animation) to our support email so we can immediately analyze the situation and check what is wrong?

Note: We kindly request that you use a file-sharing service such as Google Drive, Dropbox, or WeTransfer to share files with us, rather than sending them directly to our email addresses. All you need to do is create a private share link and include it in your message to us.

If possible, please avoid setting an expiration date for your shared files, as our team might not be able to review them immediately. This ensures that we can access the files whenever necessary. Your understanding is greatly appreciated.

Thanks!

4

Cheers Emmanuel,

I don’t have any active projects with pin involved. Once I battled with it more than a few times I now default to just writing the GSAP code myself.

Saying that, I think the problem is understanding the UI and lack of documentation on how to get something to pin rather than a bug in Pinegrow (though that’s not out of the question).

Maybe @tytusie has a project they can share which might uncover a bug.

5

@fakesamgregory @tytusie

Interactions world is vast, and I have no idea about what you are trying to achieve with the pinning SO I have quickly tested with the last version of Pinegrow (7.7 released today) and with a very standard pinning action (an element from my document stay pinned for some time while I scroll down/up)

  1. A quick reminder by reading the documentation (yes, I’m far from being an Interactions specialist and yes, the documentation is not super exhaustive about this feature)

  2. So because it’s easy with Pinegrow, I want to check how the example from the documentation is done. It’s simple, I open the documentation URL >
    Scroll Scene | Pinegrow Web Editor from Pinegrow (Open URL from the dashboard) and I check the tree structure and the Interaction settings.

    image
    image1920×1252 185 KB

    It’s more complex than what I want to try but it is useful to understand the process :slight_smile:

So far, it works in Pinegrow.

  1. Last step, with my simple understanding of the Pinning, I start a new project (using a Bootstrap template available in Pinegrow) and I try my very basic pinning action.
  • I set the scroll scene on the section
  • No specific settings, everything set to default
  • I pin the section and while the document scroll up/down, when the section is pinned, I add a Jello effect on the element.

Note: You can download the project here

It seems ok as well.

Feedback welcome.

3 Likes
6

Hi @Emmanuel,
I looked at Your project again, comparing it with mine. I noticed that maybe the difference was the element on which I was setting the scroll scene. I noticed that you took an element that was higher up in the hierarchy, whereas I initially selected elements that were nested–from here I realized that I probably couldn’t get the effect I was hoping for (which by the way I abandoned, because I was fine with the native scroll scene after all). I’ll try again on the next page where precisely, having a little clearer how the hierarchy works to be respected, I’ll try to set up the animation according to that logic.

PS… Do you think we will ever have the ability to have additional features in Interactions? I mean at least custom easing? That would be really nice, because sometimes the animations with the classic easing shapes are a bit flat…

Thank you for taking the time and effort to test this Pin effect for us - I appreciate it.

7

I don’t have specific information about this topic, and I’m far from being an expert or user of this functionality, but one thing is for sure: the Interactions add-on will continue to evolve in future versions of our applications, and we welcome your feedback :wink:

1 Like
8

@tytusie custom easing can be added as described here:

1 Like
9

@matjaz
Good morning Matjaz,

great, thank you - let me ask how i’d translate then the custom cubic bezier from a css animation to the example parmeters listed on the documentation

<script>
var CustomEases = {
    viceVersa: function(r) {
    	return 1 - r;
    },
    random: function(r) {
    	return Math.random();
    },
    meetTheGhost: function(r) {
    	return Math.round(r * 100) % 2 === 0 ? r : (1-r);
    },
    customBezier: function(r) {
        // cubic-bezier(0.97, 0.01, 0.62, 0.84)
        // return **What?**
    }
}
</script>
10

@tytusie I asked the PG AI Assistant and it came up with:

var CustomEases = {
    viceVersa: function(r) {
    	return 1 - r;
    },
    random: function(r) {
    	return Math.random();
    },
    meetTheGhost: function(r) {
    	return Math.round(r * 100) % 2 === 0 ? r : (1-r);
    },
    customBezier: function(t) {
      let P0 = {x: 0, y: 0};
      let P1 = {x: 0.97, y: 0.01};
      let P2 = {x: 0.62, y: 0.84};
      let P3 = {x: 1, y: 1};
      
      let bezierX = Math.pow(1 - t, 3) * P0.x + 3 * Math.pow(1 - t, 2) * t * P1.x + 3 * (1 - t) * Math.pow(t, 2) * P2.x + Math.pow(t, 3) * P3.x;
      let bezierY = Math.pow(1 - t, 3) * P0.y + 3 * Math.pow(1 - t, 2) * t * P1.y + 3 * (1 - t) * Math.pow(t, 2) * P2.y + Math.pow(t, 3) * P3.y;
      
      return bezierY;
    }
}

Have not tested it, but this could be a way to go.