kubik101

August 25, 2023

Would you be able to help me edit my codepen example to use only one canvas as you've suggested would be possible please?

😃

August 14, 2023

Hi Rodrigo.

I am hoping for some hands on help as I don't have the skill or knowledge to know what to change or add.

I understand the concepts but don't know how to implement.

Can anyone help provide a working solution?

- - -

Just a FYI for those looking to help.

I am wondering which solution would be better:

1) Multiple sequences always rendering to a single canvas.

OR

2) One sequence (with all frames in folder) where within each tl.to you declare the frame range (start and end frame).

** There are 51 images in the "000" folder which contain all the frames from folders "001" and "002"

- - -

Thank you.

😃

August 14, 2023

Hi Rodrigo.

Yes you are missing the key request.

I am wondering if it's possible to make each sequence (and there could be 7 or more in the end) always push it's frame into the same/one canvas (so there is only one canvas on the page) ?

Thank you.

August 13, 2023

@mvaneijgen Understood. Won’t do it again. Wasn’t in hope of speed. But in hope the right person sees it. I know he’s been involved with this topic a lot and may have written the original example.

August 13, 2023

@OSUblake - Hi OSUblake, wanted to draw your attention to this, hope you don't mind.

August 13, 2023

I think my original post/question is dictating and confusing the possible solution too much.

So I would like to pose it more simply:

I like how everything works in my codpen example, but wondering if it's possible to make each sequence (and there could be 7 or more in the end) always push it's frame into the same/one canvas (so there is only one canvas on the page).

My approach would be something like this:

tl.to(
  sequenceOne,
  {
    frame: ???? -1,
    snap: "frame",
    duration: 2
  },
  ">"
);

// some stuff inbetween

tl.to(
  sequenceTwo,
  {
    frame: ???? -1,
    snap: "frame",
    duration: 2
  },
  ">"
);

// some stuff inbetween

tl.to(
  sequenceThree,
  {
    frame: ???? -1,
    snap: "frame",
    duration: 2
  },
  ">"
);

August 13, 2023

Hi GSAP community.

2 image sequences
2 canvas'

~~Text appears in the middle/between the 2 sequences~~

~~Each image sequence renders to their respective canvas.~~

~~I would like some help setting things up so that the 2 sequences become 1 longer sequence rendering to 1 canvas.~~

~~But I need the ability to pause or hold this longer single sequence at a particular frame number, so I can animate (text for example), at specific points in the sequence.~~

Please note, if this is achievable I will scale things up to a much larger sequence which will require very specific control to be able to hold/pause (for a declared period of time) at multiple points in the timeline at specific frame numbers etc.

To help things along I have a folder at the same location as the other folders called "000" so replace the first sequence's location "001" with "000".
- There are 51 images in the "000" folder and the first pause point would be at frame "26" if we are to replicate my codpen example.

Thanks guys.

😃

See the Pen NWEZZQj by kubik101 (@kubik101) on CodePen

August 11, 2023

Hi Cassies.

Thanks for all the above extra info.

I included my timeline code so that it was clear I was talking about a pinned scrollTrigger timeline.

My question has not quite been answered, I may have complicated it, let me try again.

For any scrollTrigger timeline even the simplest, would adding scrollSmoother be good/best practice to help give some extra polish (good feeling)?

(not using any parralax etc, but simply just registering it and applying it to the timline?)

Thank you.

😃

August 11, 2023

Hi.

Please note: this is a general question asking if the plugins will work well in a positive way when using pinned scrollTrigger timelines.

I have a large scrollTrigger timeline which is pinned and I want to do everything I can do to make it feel as smooth as possible.

Can you use scrollSmoother on/for scrollTrigger timeline's which are pinned?

timeline code is here if it helps:

let tl = gsap.timeline({
    onUpdate: render,
    defaults: {
        ease: 'none',
    },
    scrollTrigger: {
        trigger: section,
        pin: true, // pin the trigger element while active
        start: 'top top', // when the top of the trigger hits the top of the viewport
        end: '+=1000%', // end after scrolling 500px beyond the start
        scrub: 0, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar: was 1
        anticipatePin: 1,
        invalidateOnRefresh: true,
    },
})

August 7, 2023

1 minute ago, GreenSock said:

M1 MacBook Pro

Side note: Killer, I need to upgrade, waiting to see if they eventually do a M? iMac 27" or bigger.

Thanks so far.

😃

August 7, 2023

2 minutes ago, GreenSock said:

For the record, I'm pretty confident this has absolutely nothing to do with GSAP/ScrollTrigger - it's very likely a graphics rendering issue in Safari itself.

Thanks for that, I appreciate your hunch, opinion, I will be testing on other machines.

Lastly may I ask what Mac device you viewed on?

Mine is: iMac (Retina 5K, 27-inch, Late 2014)

August 7, 2023

Thanks @GreenSock

I will need some more help and will make a codePen when I ask for it.

Shall I post a brand new topic, or continue it here?

August 7, 2023

Ok thanks.

May I ask what version of MacOS Safari you viewed on?

Mine is: Version 16.5 (16615.2.9.11.6, 16615)

August 7, 2023

@GreenSock

Thanks for your reply.

Is normalizeScroll an iOS only thing?

My issue is macOS Safari, did you look on macOS?

August 7, 2023

Hi @fonveton

I have a similar issue here: https://www.mtbarkerwaldorf.sa.edu.au

Make sure you are in Safari.

Just scroll up and down and make the first 2 blobs go off screen and come back on screen (second section on page) and you will notice a flash of content (the blobs).

Is the same behaviour you were experiencing?

If so, what was the correction in your calculations for offset().top that you made?

Thanks.

Att: @GreenSock

June 26, 2023

For those looking for the solution.

This will fix your issue, but looks like it won't be necessary in this scenario once Jack's beta code becomes part of the main build (correct me if I am wrong @GreenSock.

ScrollTrigger.config({ ignoreMobileResize: true });

June 11, 2023

Hi Jack.

I am really appreciating your help.

- - -

You are correct, window.innerHeight does change height as the toolbars disappear/re-appear.

But just to be clear, elements with a css value of 100vh will not change their height at any point (that's what 100dvh is for).
100vh will take on the height of the window as if the toolbars and address bars have disappeared and I would expected gsap/scrollTrigger to behave the same out of the box.

Which I think your beta fix is now pretty much doing.

- - -

Wow! Thank you for being so proactive and supplying this beta file, I have put it in my example and yes it behaves as expected.
- https://kubikdesign.com.au/posts/gsap/00-original-100vh-beta.html

- - -

And thank you so much for answering my secondary question, much appreciated again..!!

- - -

Thank you once again Jack, I am pleased this lead to an improvement to an already amazing library!

😃

June 11, 2023

Hi Jack.

Thank you for your reply.

- - -

May I firstly clarify something so that we are on the same page here.

Let's forget about GSAP and scroll trigger for a moment and focus on the units vh and dvh.

VH on its own will not affect and shift the height of the page as you scroll down on mobile.
- https://kubikdesign.com.au/posts/gsap/03-no-gsap-100vh.html

DVH on its own will affect and shift the height of the page at the exact moment the toolbar and address bar dis/and re-appear.
- https://kubikdesign.com.au/posts/gsap/04-no-gsap-100dvh.html

^ Do we agree on this?

- - -

Now let's talk about when GSAP and scroll trigger are involved.

Looks like regardless of height, when pinning scrolltrigger places a pin-spacer with inset: 0; and a height and padding based on the height of the screen multiplied with your end: eg. end: '+=500%'.

New 400px height example: https://kubikdesign.com.au/posts/gsap/01-original-400px.html
Original 100vh example: https://kubikdesign.com.au/posts/gsap/01-original-100vh.html

Both the 400px high and 100vh versions jump, because the pin-spacer is being recalculated on window resize being triggered by the browsers automatic appear/disappearing of toolbars and address bar when scrolling.

So your suggestion to use "ignoreMobileResize: true;" is the solution (thank you!) but is unrelated to using 100vh on the pinned section - agreed?
- Solution applied (no jump now, yay!): https://kubikdesign.com.au/posts/gsap/02-original-100vh-ignore-resize.html

- - -

Now I am curious how to go about pinning a section with a height smaller then the screen height and have the next section (purple) immediately after it whilst the blue gsap section is pinned.
(CodePen updated to 200px high section and end: '+=100%')

Currently the pin-spacer's height gets set to the height of the screen showing the background color, pushing the next purple section out of view.

** you may say to try pinSpacing: false; putting this in means the purple and other sections scroll behind whilst the blue is pinned.

So how do we solve this scenario when a pinned section is smaller than screen height and we want the next section to be immediately after the pinned section?

June 10, 2023

Hi mvaneijgen.

I tried putting normalise on and it did not help the issue, see here:

https://kubikdesign.com.au/posts/20230610-gsap-jump-issue-normalize.html

Also your comment here:

Quote

It could also help if the height would be a fixed value. I'm not completely sure, but ScrollTrigger watches for resize events and will update function based values, so you could remove your function based values or get a value that doesn't change when the address bars show and hide. Again I'm not sure, but maybe offsetHeight gets recalculated when the browser bars are removed?

If you are referring to the .gsap--section (which i hope you are), that is set to a minimum height of 100vh, which does not get affected by resize events.

My use of offsetHeight is only to calculate Y positions and height of the scrolling black divs etc, nothing to do with the height of the pinned section.

Issue is still unresolved, does (you) or anyone have any other possible solutions?

June 10, 2023

Hi Guys.

I have been doing more investigation and the issue is definitely related to the browsers address bar and toolbar disappearing/re-appearing.

- - -

To prove this I measured how much the page is jumping and compared that value to the difference in the viewable height of the browser.
This visible difference is seen in the image I have created which shows in "RED" the 350(^) extra pixels when toolbar and address bars are hidden (I will refer to the 350px(^) value further down).

(^) please note screenshot is done on retina screen so divide by 2 for classic pixels.

- - -

I also found that the value of the "end:" in the gsap.timeline affects how much the page jumps.

In my original code pen and html file you will notice I have end: '+=500%', (full timeline code below)

let tl = gsap.timeline({
    scrollTrigger: {
        trigger: section,
        pin: true,
        start: 'top top',
        end: '+=500%',
        scrub: 0,
        anticipatePin: 1,
        invalidateOnRefresh: true,
    },
})

So in this case the page jump is big because the jump is equal to 5 * 350px(^) which equals 1750px(^)

I then tested this theory with end: '+=100%', and end: '+=200%', and found that yes the jump was equal to the amount of % eg:

end: '+=100%', = 1 * 350px(^) which equals 350px(^)
end: '+=200%', = 2 * 350px(^) which equals 700px(^)

- - -

This is now presenting as a bug unless there is a setting or solution I have overlooked??

- - -

Side thought: Is GSAP using DVH as a unit of measure Dynamic Viewport Height which could be contributing to this?

June 10, 2023

Was playing/interacting with the html version on my phone.

See my observations here (ensure sound is on): https://kubikdesign.com.au/posts/20230610-gsap-jump-issue-02.mp4

Just a theory:

I think the issue is because on mobile the browsers address bar and toolbar disappear/re-appear when you scroll down (disappear) and when you scroll up (re-appear) and as a result something funky is happening in gsap's calculations.

June 10, 2023

Hi Guys.

I have replicated my issue in CodePen but you can not see the issue unless you view it in a mobile browser without CodePen wrapping it.

So to show you, I have placed the same code that is in the CodePen in a html version as a visitable link.

https://kubikdesign.com.au/posts/20230610-gsap-jump-issue.html

The issue is: after scrolling past the scrollTrigger area the page jumps up.

I have also created a screen recording on/of my mobile showing and explaining the issue (ensure sound is on).

https://kubikdesign.com.au/posts/20230610-gsap-jump-issue.mp4

Thanks guys.

😃

See the Pen yLQNLZx by kubik101 (@kubik101) on CodePen

December 16, 2022

Hi Cassie.

Thanks for your response.

"This isn't really about sequencing and chaining"
- Sorry I don't know the right terminology at times so may have been using the wrong words to explain what I was after.

The issue I was needing to resolve was the knowing how to "string together" multiple points (x or y etc) on the one element in a single timeline.

So it wasn't about the math in this case as you refer to it, it was me not knowing how to put in the extra .to 's to the timeline (example code below).

tl.to('.st--block-c3', {
    ease: 'none',
    y: () =>
        -document.querySelector('.st--section-c3').offsetHeight +
        document.querySelector('.st--block-c3').offsetHeight,
})
    .to('.st--block-c3', {
        ease: 'none',
        x: () =>
            document.querySelector('.st--section-c3').offsetWidth -
            document.querySelector('.st--block-c3').offsetWidth,
    })
    .to('.st--block-c3', {
        ease: 'none',
        y: () => 0,
    })
    .to('.st--block-c3', {
        ease: 'none',
        x: () =>
            document.querySelector('.st--section-c3').offsetWidth * 0.5 -
            document.querySelector('.st--block-c3').offsetWidth,
    })

You also made mention:

"You want to move the box to fixed positions on the screen but the box is also housed inside a moving container that's going to impact it's position."

This is not as arbitrary as you think, in the case of horizontal scroll you include this on all your timelines within the horizontal section(s).

containerAnimation: scrollTween,

Search for "containerAnimation" in the following link:

https://greensock.com/docs/v3/Plugins/ScrollTrigger

I have updated my codePen to include the solution.

Thanks to everyone's help the pen is stable and working as expected (except some code is probably long winded as I am no JS expert and I am still in the early days of learning GSAP3).

December 15, 2022

Hi GreenSock.

Thank you for your solution.

So simple in the end.

While I have you, if you're able and willing, an extended question which I have posted here:

December 15, 2022

Please refer to the codepen and then third slide/section in the horizontal scroller.

I have placed the comments "attempting to move c3 from top left to top right, then top right to bottom right" in both the JS and HTML so you know the area to focus on.

Q). How would you move an object from: top left, to: top right, then from: top right, to: bottom right.

What I am trying to understand and learn is how to chain animations (if that is the right term) and sequence (time them) one after the other, all while scrub is enabled.

Thank you.

😃

See the Pen yLEmJor by kubik101 (@kubik101) on CodePen

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by kubik101