scrub makes scroll progress the playhead. pin holds content in place. toggleActions is different: it runs commands when the scroll position crosses a trigger's start or end boundary.
This lesson builds on GSAP easing, timeline sequencing, timeline controls, the position parameter, timeline stagger, ScrollTrigger fundamentals, start and end positions, and scroll-linked scrub. The planned pin article is not linked because its PHP page is not present in this backup.
gsap.from(".feature", {
y: 50,
opacity: 0,
scrollTrigger: {
trigger: ".feature",
start: "top 80%",
end: "bottom 20%",
toggleActions: "play pause resume reverse"
}
});1. What is toggleActions?
It is a four-command string. Each command belongs to one boundary event, and order is the entire mental model.
2. The four positions
toggleActions: "play pause resume reverse"Cross START while scrolling down
Cross END while scrolling down
Cross END while scrolling up
Cross START while scrolling up
3. Read an action string from left to right
"play pause resume reverse" means play on entry, pause after the end, resume when returning through the end, then reverse after moving back above the start.
4. Available actions
playContinue forward from the current position
pauseStop at the current position
resumeContinue after a pause
reverseAnimate backward from the current position
restartReturn to zero and play
resetReturn to zero and pause
completeJump to the completed state
noneTake no action
5. Useful beginner patterns
play none none nonePlay once on first entryplay none none reversePlay entering, reverse above startplay pause resume reverseControl every boundaryrestart none none noneReplay from zero on every entryplay none none resetPlay entering, jump back above start6. Interactive Action Decoder
7. Live boundary demo
Scroll through the stage in both directions. The current event is announced without making the content depend on motion.
Waiting for a boundary...
8. toggleActions versus scrub
Scrub continuously owns progress. Combining it with toggle actions is possible but often confusing because both features try to influence the same playhead.
9. toggleActions versus pin
10. Timeline control
Attach one ScrollTrigger to a timeline to control the whole sequence as a unit.
const tl = gsap.timeline({
scrollTrigger: {
trigger: ".service-story",
start: "top 75%",
end: "bottom 25%",
toggleActions: "play none none reverse"
}
});
tl.from(".label", { y: 15, opacity: 0 })
.from(".title", { y: 35, opacity: 0 })
.from(".cards", { y: 30, opacity: 0, stagger: 0.1 });11. Practical section examples
Services built to move ideas forward
Use one scoped timeline for the heading and cards.
Reveal a label, heading and supporting paragraph once.
Reverse cards naturally when scrolling back above the section.
12. Similar actions, important differences
13. Event logger
- Logger ready
14. Main toggleActions Lab
Control Scroll Events
Choose four actions, rebuild only this lab, then cross its boundaries.
Lab ready.
15. Start, end and scroll direction still matter
16. Common mistakes
- Providing fewer than four action positions.
- Mixing up
onLeaveandonLeaveBack. - Using an unsupported action name.
- Expecting toggleActions to behave like scrub or pin.
- Using reset where a visible jump causes flashing.
- Rebuilding a demo without killing only its old trigger.
- Leaving markers enabled in production.
- Hiding essential content before JavaScript runs.
17. Debugging checklist
18. Performance, accessibility and mobile
Prefer transforms and opacity, keep entrances short, avoid a trigger for every small word, and test quick direction changes on touch devices. Content remains visible when JavaScript fails.
This tutorial detects prefers-reduced-motion, skips repeated scroll-controlled animation, and leaves every heading, card and control readable.
19. Mini challenge
Control Scroll Events
Play this animation when entering and reverse it when scrolling back above.
20. Quick reference
| Action | Behavior |
|---|---|
play | Continue forward from the current position |
pause | Stop at the current position |
resume | Continue after a pause |
reverse | Animate backward from the current position |
restart | Return to zero and play |
reset | Return to zero and pause |
complete | Jump to the completed state |
none | Take no action |
| Position | Event |
|---|---|
| 1 | onEnter |
| 2 | onLeave |
| 3 | onEnterBack |
| 4 | onLeaveBack |
21. Cheat sheet
toggleActions: "play pause resume reverse"22. Final mental model
23. Three original post designs
These alternate NavTechSolution visuals reinforce the same four-event model without relying on external screenshots.
24. Coming next
Frequently asked questions
What is toggleActions in GSAP ScrollTrigger?
toggleActions assigns animation commands to the four moments when a trigger crosses its start and end boundaries.
What are the four toggleActions positions?
In order they are onEnter, onLeave, onEnterBack and onLeaveBack.
What does onEnter mean?
It fires when scrolling forward crosses the start boundary and enters the active range.
What does onLeave mean?
It fires when scrolling forward crosses the end boundary and leaves the active range.
What does onEnterBack mean?
It fires while scrolling backward across the end boundary into the active range.
What does onLeaveBack mean?
It fires while scrolling backward across the start boundary and leaves the active range.
What is the difference between play and restart?
play continues from the current playhead position; restart returns to the beginning and plays.
What is the difference between resume and restart?
resume continues from a paused position; restart begins again from time zero.
What is the difference between reverse and reset?
reverse animates backward; reset jumps to the beginning and pauses.
What does none do?
It deliberately performs no command for that boundary event.
Can I use toggleActions with a GSAP timeline?
Yes. Place ScrollTrigger on the timeline and the selected actions control the entire sequence.
What is the difference between toggleActions and scrub?
toggleActions runs commands at boundary crossings; scrub continuously maps scroll progress to animation progress.
Can I combine toggleActions and pin?
Yes, although each option solves a different problem and should be added only when the experience needs it.
Why is my ScrollTrigger animation not replaying?
The default actions may play only on first entry. Use restart or a reverse/reset action at the appropriate boundary.
Can I use toggleActions on a PHP website?
Yes. PHP renders HTML while GSAP and ScrollTrigger run in the browser.
