edmundsecho
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by edmundsecho
-
-
Solution
One of elements had a height that was
200vh
. Prior to my using this amazing library, it made sense to work the effects I was after. So, to ensure the scroll duration aligns with the elements in the intro, make sure the heights don't include extra space if that's not intended (obvious :)).Summary
Conceptually, to align the
end +=SomeDistance
with the intro elements, greensock does that for you "auto-magically":- setting the height to the sum of the elements in the intro
- setting bottom padding value to the +=SomeAmountpx
... the computed height value depends on the height of each element.
-
This is an extended scenario described in this recent post:
Extended scenario
Say you have content you want the user to scroll "normally" following the animation in this post. So, once the
scrollTrigger
content "comes and goes" during the active period of thescrollTrigger
, you have more content. Said differently, the elements included in thescrollTrigger
animation serve to introduce the "normal" content.It may be documented elsewhere, but in my experience extending the
scrollTrigger
by+=SomeAmount
does not seem to work if I don't somehow adjust the size of the "scrollTrigger elements" in such a way that they consume the extra distance.The question
Is there a best practice for how to align the size of the "scrollTrigger elements" with the
scrollTrigger.end += SomeAmount
?Partial answer
Setting the pin attribute of the
scrollTrigger
will have greenSock add a wrapping<div class="pin-spacer pin-spacer-intro-scene">
with a style settingpadding: 0px 0px SomeAmoutpx
, the scrollTrigger duration (where time ~ distance). The answer is only partial because my current animation has empty space the user needs to scroll through before hitting the elements outside of the wrapped content. -
This is a helpful post. I moved my follow-up question to a new post.
-
I have seem this webpage feature referred to as a "scroll to top button". So, it's a button that appears once the user scrolls down the page. To get the button to appear I'm using a
scrollTrigger
.The focus of this post is how to animate the page "scrolling to the top". Is there a way to use
gsap
to do so? I would use an easing function to provide a nice user experience. As of now, using vanilla JS, it races to the top.Thank you.
-
5 hours ago, GreenSock said:
I may not be understanding you correctly, but it seems to me like you're assuming that the showHideTrack and zoomOut animations are exactly the same duration but they're not.
Your observation is spot-on. I did not understand how the timelineS would be derived when ultimately set by the user scrolling for whatever "space" exists between the start and end of the scrollTrigger. The 2 lines of code provided was the missing ingredient. Thank you!!
-
Thank you for your input. I've made some good progress using a series of nested timelines. I believe there is one missing understanding on my part.
See the Pen oNwPdbo by EdmundsEcho (@EdmundsEcho) on CodePen
(the console prints out what is going on including the "bug").I understand how to get two timelines to run in parallel using the
timeline().add(tlA).add(tlB, "<")
syntax. I also know that to have each *end* together, that the duration values need to be the same.However, what if the duration is set using a
scrollTrigger
?... per the following:gsap .timeline({ scrollTrigger: { trigger: "#header-trigger", start: "top top", end: "+=900", scrub: 1, markers: true, onEnter: () => console.log("header-enter"), onLeave: () => console.log("header-leave"), id: "intro-scene", }, }) .add(master) .add(zoomOut, "<");
... is it really a matter of setting the trigger to a
const
to then reference the trigger in *both* the master andzoomOut
timelines, separately? What's a little confusing here is that themaster
timeline clearly takes on the length of however long it takes to scroll900px
, what prevents thezoomOut
from doing the same?... or is this where the
scrollTrigger.batch()
comes in handy?PS: Apologies for not getting this up and running in code pen, I'm just not that efficient as of yet.
-
I'm new to GreenSock and combining/coordinating animations.
gsap
is a pleasure to work with; I've been really productive with "one-off" animations with and without usingScrollTrigger
.The elements
I have 3 elements (
img
andsvg
), all set to the same size, positioned on top of each other on the same location on the screen. Two of them start at a large 4x scale. One of the elements is visible at scale 1 to start.While the user scrolls for 900px, the following is to take place, "in place" (i.e., scrolling drives the animation using scrub, but does not appear to scroll per se).
The task
I'm after the following, in place:
v ~~~~~~ scrolling 900px ~~~~~~~~~~~~v
------- hide element 1
---------------------------------------------------- scale down to 1 elements 2 & 3
--------- show element 2 (a svg)
----------- run the svg animation
---------- hide element 2
------------- show element 3
Code thus far
The scroll trigger...
gsap .timeline({ scrollTrigger: { trigger: "#header-trigger", start: "top top", end: "+=900", scrub: 1, markers: true, onEnter: () => console.log("header-enter"), onLeave: () => console.log("header-leave"), id: "intro", }, }) .to(".element-1", { opacity: 0, })
... and the animation for element-2 (a svg)
const element2Animation = gsap .timeline() .from(".top-box", { y: -1000 }, 0) .from(".bottom-box", { x: 1000 }, 0) .from(".right-box", { x: -1000 }, 0) .from(".left-box", { y: 1000 }, 0) .from(".context-box", { autoAlpha: 0 }) .from(".grid", { autoAlpha: 0 });
I'm stuck on how to add to the timeline that enables a combination of sequence (e.g., change scale of elements 2 & 3 following my taking element 1 opacity to 0) and "in parallel" with animations that run together (scale both elements 2 & 3) while running the show/hide sequence of the elements.
Thank you in advance to anyone with guidance on how to think through this.
- E
-
Thank you. Placing the `scrollTrigger` inside the `timeline` configuration was the issue. Thank you very much.
- 1
-
I'm a new user. Great work to you all!
I have the animation working in css by setting the animation property. I also have other html/css elements animating with the ScrollTrigger plugin. So, I get the basics. Here is the code that does not seem to work:
The css
```css
.link {
stroke: #ffffff;
stroke-opacity: 0.8;
stroke-dasharray: 1000; /* make longer than line */
stroke-dashoffset: 1000;
stroke-width: 1;
/* animation: link-animation 1s linear forwards; */
fill: none;
}/* not utilized (later will include as backup animation per the GreenSock docs?) */
@keyframes link-animation {
to {
stroke-dashoffset: 0;
}
}```
The js
```js
gsap
.timeline()
.to(".link", {
scrollTrigger: {
trigger: "#action-inventory",
start: "center center",
toggleActions: "restart none none restart",
markers: true,
onEnter: () => console.log("enter"),
onLeave: () => console.log("leave"),
id: "act-inventory",
},
strokeDashoffset: 0,
duration: 3,
});```
and the html
```html
<svg class="inventory-svg" height="100%" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1"
viewBox="100 0 900 940">
<defs>
<filter id="blurr" x="-20" y="-20" width="100" height="100">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" /> </filter>
<g id="list-item" class="list-item">
<path stroke-width="8" d="m6.79 6.146 19.543 9.771L6.79 25.689V6.146Z" />
<path stroke-width="19" d="M55.703 15.917H163.19" /> </g>
<symbol id="file-icon" class="file-icon">
<title>File icon</title>
<svg width="98.3" height="114.4" viewBox="0 0 98.3 114.4">
<path d="M1 1h81l13 13 1 98H1V1Z" fill="var(--fill-color)" fill-opacity="var(--fill-opacity)"
stroke="var(--stroke)" stroke-width="var(--stroke-width)"
stroke-opacity="var(--stroke-opacity)" opacity="var(--opacity)"
/> </svg>
</symbol>
</defs>
<!-- drawing -->
<g id="links">
<g id="link-1">
<path class="link" id="path-link-1" d="M465.63+545.095L574.015+543.531L793.719+762.672L815+762.538"
/> </g>
<g id="link-2">
<path class="link" id="path-link-2" d="M220.154+362.592L470.094+363.045L790.898+701L815+700.79"
/> </g>
<circle class="pulsate" cx="-5" cy="0" r="5">
<animateMotion begin="3s" dur="6s" repeatCount="indefinite" rotate="auto">
<mpath href="#path-link-2" /> </animateMotion>
<animateTransform attributeName="transform" begin="2s" calcMode="linear" type="scale"
values="0;0.2;1;0.2;0" dur="3.5s" repeatCount="indefinite"
/> </circle>
</g>
</g></svg>
```
The scroll triggers are activated per the log to the console. The class name and css attribute spelling and capitalization seems right.
### Is there something I'm missing that has gsap find the elements with the ".link" class to then change their `strokeDashoffset: 0`?
Thank you!
(Note: I can return shortly to put the code into codepen)
How align the size of the elements included in the scrollTrigger animations when the end is specified as: +=SomeDistance
in GSAP
Posted
I have what I need. Thank you.