Pixel-people
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Pixel-people
-
-
Hi Guys,
Sorry for not attaching a codepen, but i cant find the CDN for CSSRule to work properly.
When Scrolltrigger hits the end of the trigger element it looks like the animation will go to the starting position.
Is it possible to hold the current state when scrollTigger end is hit / out of view
Code example timeline:
let tl = gsap.timeline({scrollTrigger: {trigger: shade,start: "top center",end: "bottom bottom",pin: false,},});Code from position:
tl.from(background, {width: "0",duration: 1,ease: "elastic.out(1, 0.3)",});Current CSS
&:before {width: calc(100% + 1.5rem);left: -20px;background-color: $primary;}Issue: after the end hits, the animation will set back to the from position, but i want to hold the current CSS position.
-
Hi Guys,
I've rewrite the code several times, hope someone could steer me in the right direction. Codepen scrollTrigger works as aspected, but when i use the same code on staging, scrollTrigger wil not trigger. Could i turn on a debug-mode for scrollTrigger?
Already checked:
- Animation works without scrollTrigger in the timeline.
- Devtools bar would play the animation when in view
- No console log error
- With scrub: true, scrollTrigger will trigger
Element(s) to trigger
What can i do to make this work?
Solution: looks like a need a start and end point. Still curious why codepen is working and dev-env start/end needed.
Control imported timelines on a master timeline
in GSAP
Posted
Sorry to bump this topic, but i got the same issue as described. Already using the available "solution", but its not working for me.
Pausing and playing the master timeline does not work.
// Create a new TL
let masterTimeline = gsap.timeline({ paused: true });
// Added two timelines (functions will return tl)
masterTimeline.add(
new animateBackground().add(new menuAnimation(), "-=60%")
);
// Added an event to start playing the master timeline
trigger.addEventListener("click", () => {
masterTimeline.play();
});
- Master timeline variable is available within the event function
- Master timeline works as aspected within the page load, but as described the play/pause methodes are not working.
Is there something i overlooked?
Package
Edit:
Used:
import gsap from "gsap";
Changed to the CDN, and the master timeline is working