# "Pinned" Scroll Animations — Am I missing something?

**URL:** <https://forum.pinegrow.com/t/pinned-scroll-animations-am-i-missing-something/8358>\
**Category:** Pinegrow Interactions Add-on\
**Created:** [September 13, 2023, 9:20am UTC](https://forum.pinegrow.com/t/pinned-scroll-animations-am-i-missing-something/8358 "2023-09-13T09:20:53Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![tytusie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/tytusie/32/6914_2.png) [@tytusie](https://forum.pinegrow.com/u/tytusie)\
**Post date:** [September 13, 2023, 9:20am UTC](https://forum.pinegrow.com/t/pinned-scroll-animations-am-i-missing-something/8358/1 "2023-09-13T09:20:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![fakesamgregory](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/fakesamgregory/32/3903_2.png) [@fakesamgregory](https://forum.pinegrow.com/u/fakesamgregory)\
**Post date:** [September 15, 2023, 7:32am UTC](https://forum.pinegrow.com/t/pinned-scroll-animations-am-i-missing-something/8358/2 "2023-09-15T07:32:11Z")

</div>

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

I always resort to writing code for pinning.

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [September 15, 2023, 8:23am UTC](https://forum.pinegrow.com/t/pinned-scroll-animations-am-i-missing-something/8358/3 "2023-09-15T08:23:43Z")

</div>

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?

> **[Contact Us | Pinegrow Web Editor](https://pinegrow.com/contact-us/)**
>
> Ran into problems? Have a suggestion? We would love to hear from you!

Note: We kindly request that you use a file-sharing service such as [Google Drive](https://www.google.com/intl/en_in/drive/), [Dropbox](https://www.dropbox.com/), or [WeTransfer](https://wetransfer.com/) 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!

---

<div class="post-metadata">

**Author:** ![fakesamgregory](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/fakesamgregory/32/3903_2.png) [@fakesamgregory](https://forum.pinegrow.com/u/fakesamgregory)\
**Post date:** [September 15, 2023, 8:51am UTC](https://forum.pinegrow.com/t/pinned-scroll-animations-am-i-missing-something/8358/4 "2023-09-15T08:51:21Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [September 15, 2023, 9:34am UTC](https://forum.pinegrow.com/t/pinned-scroll-animations-am-i-missing-something/8358/5 "2023-09-15T09:34:46Z")

</div>

@fakesamgregory @tytusie

> [@tytusie](#):
>
> Pinned animation

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](https://pinegrow.com/release_notes/pinegrow-web-editor-7-7/)) 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](https://pinegrow.com/docs/interactions/actions/scroll-scene/) (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](https://pinegrow.com/docs/interactions/actions/scroll-scene/) from Pinegrow (Open URL from the dashboard) and I check the tree structure and the Interaction settings.  

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](https://www.dropbox.com/scl/fi/rp6iiw2d3ws2fa8v3m569/pinning-test.zip?rlkey=ndvaaefbu8pofuj4qmqru9iau&dl=0)

It seems ok as well.

[![](https://img.youtube.com/vi/vPGiH3eOSY4/maxresdefault.jpg "Testing Interactions Scroll Scene : Pinning with Pinegrow 7.7") ](https://www.youtube.com/watch?v=vPGiH3eOSY4)

Feedback welcome.

---

<div class="post-metadata">

**Author:** ![tytusie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/tytusie/32/6914_2.png) [@tytusie](https://forum.pinegrow.com/u/tytusie)\
**Post date:** [September 16, 2023, 5:58pm UTC](https://forum.pinegrow.com/t/pinned-scroll-animations-am-i-missing-something/8358/6 "2023-09-16T17:58:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [September 16, 2023, 7:14pm UTC](https://forum.pinegrow.com/t/pinned-scroll-animations-am-i-missing-something/8358/7 "2023-09-16T19:14:14Z")

</div>

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 😉

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [September 19, 2023, 9:31am UTC](https://forum.pinegrow.com/t/pinned-scroll-animations-am-i-missing-something/8358/8 "2023-09-19T09:31:32Z")

</div>

> [@tytusie](#):
>
> PS… Do you think we will ever have the ability to have additional features in Interactions? I mean at least custom easing?

@tytusie custom easing can be added as described here:

> **[Custom ease functions - What’s new in Interactions 2.0? | Pinegrow Web Editor](https://pinegrow.com/docs/interactions/whats-new-in-interactions-2-0/#custom-ease-functions)**
>
> See all the new features in the latest Pinegrow Interactions update.

---

<div class="post-metadata">

**Author:** ![tytusie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/tytusie/32/6914_2.png) [@tytusie](https://forum.pinegrow.com/u/tytusie)\
**Post date:** [October 19, 2023, 3:48am UTC](https://forum.pinegrow.com/t/pinned-scroll-animations-am-i-missing-something/8358/9 "2023-10-19T03:48:14Z")

</div>

@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

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [October 19, 2023, 4:58pm UTC](https://forum.pinegrow.com/t/pinned-scroll-animations-am-i-missing-something/8358/10 "2023-10-19T16:58:34Z")

</div>

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

```auto
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.
