_Greg _
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by _Greg _
-
-
Hi! Did you try to use
onReverseComplete
same way like you useonComplete
(but for hide div)- 1
-
Hi
You can do same thing with ScrollTrigger, check official demos https://greensock.com/st-demos/
If you need more specific answer, please create minimal demo
- 1
-
Hi!
You can create job in https://greensock.com/forums/forum/15-jobs-freelance/ please read the rules before
- 1
-
26 minutes ago, marius96 said:
How do I kill a timeline if I have multiple ScrollTrigger targets?
you need to declare tl outside of a function, something like:
... //your code gsap.registerPlugin(ScrollTrigger); let targets = document.querySelectorAll("h2"); let tl = [] // declarate like array ... targets.forEach((target, index) => { tl[index] = gsap.to(target, { x: 100, scrollTrigger: { trigger: target, markers: true, start: "bottom center" } }); }); ... //After you can get and kill every tl tl.forEach(timeline=>...)
Or you can add id and after getbyid (but you still need list of all ids)
- 3
-
Please create a minimal demo.
This is hard to see what happened without demo.
Did you see triggers are in the right place if you use markers: true?
Are you sure that you need to use onLeaveBack not onLeave?
-
Hi!.
You need to call recalculate ScrollTrigger after resizing with
ScrollTrigger.refresh()
-
Hi and wellcome.
This is not css properties
autoAlpha - will be converted to opacity and visibility, rotationX will be converted to transform: rotateX.. check 2D and 3d transforms
So you need just write like:
tl.from(this.$refs.plate, { autoAlpha: 0, rotationY: -26, rotationX: 72, rotationZ: 5, },2)
What do mean to specify
2
for this.$refs.plate, this is something like delay? What do you expect?UPD: SVG doesn't allow 3D transforms, please check this topic
-
Hi Petr.
I'm not sure does it important snippets but if you add .set, maybe add .quickSetter
gsap.quickSetter("element", "propName")
Also maybe add some plugins like ScrollTrigger:
ScrollTrigger.create({ trigger: selector, start: "position", end: "position", })
Draggable.create(selector,{props})
var split = new SplitText(selectors);
Also maybe add registration plugin
gsap.registerPlugin(pluginName);
Or maybe utils
gsap.utils.UtilName(UtilProperty)
This is just ideas.
-
- 2
-
Without a minimal demo very hard to say whats wrong
If you want create demo with React you can use codesandbox
The presented code is not enough to understand what the problem is
- 2
-
Hi!
ScrollTrigger is working fine with
.from()
you can check itSee the Pen 97d51a6681967e078a35f4a9e87954ea?editors=0010 by GreenSock (@GreenSock) on CodePen
Please create a minimal demo
- 1
-
Hi!
Please create a minimal demo
Buy the way, ScrollTrigger does not have any property with name
target
, cssRule plugin was deprecated andautoAlpha
orscaleX
is not css rule.You need something like
gsap.to(docImgAfter,{ duration:1.2, scrollTrigger:{ markers:true, trigger:docImgAfter, start:"top center", toggleActions:"restart none none none" }, scaleX:0, ease:"Power1.out" }) gsap.to(docImgBefore,{ duration:1.2, scrollTrigger:{ trigger:docImgAfter, start:"top center", toggleActions:"restart none none none" }, x:-60, autoAlpha:1, ease:"Power1.out" })
- 2
-
30 minutes ago, Conal said:
The bottom one works as I want but the 2 proceeding it don't.
This issue not with GSAP or Draggable.
As i understand, please correct me if i'm wrong
You create global variables (without declaration) so on every interation you rewrite it
Read about closure And about scoping rules forlet
You create variable in window (window.scrollGroupID) not inside function, if you declared variablelet scrollGroupID
you create scoped variableSee the Pen MWOezVZ?editors=0011 by gregOnCodePen (@gregOnCodePen) on CodePen
- 3
-
You need refresh ScrollTrigger every time whan you load/unload/change something in the DOM part where did you use ScrollTrigger. If some DOM element where did you use ScrollTrigger change position, size... etc you need to call
ScrollTrigger.refresh()
for recalculate positions and sizes of DOM elements.
If you refresh via Timeout you just doing useless calculations.- 1
-
Hi!
I think this is bad idea to create Draggable every time on resize, better
on resize
check is Draggable was created - then.update()
, else -.create()
If you use resize event on mobile, it will be fired every time when browser adress bar is hidden or showed (scroll up / scroll down page)
Also you can use optimizedResize (based on requestAnimationFrame + customEvent) check MDN russian version examples part (did't find on english version MDN site)- 1
-
Hi. Can you create a minimal demo
- 1
-
Hi!
you need to refresh ScrollTrigger after css animation was finished. Check ScrollTrigger.refresh()
Also i add
markers: true
to display result of refresh (just for debug)Also
pin: true
is the same likepin: ".pinned-section"
, by defaultpin
pinningtrigger
elementSee the Pen zYPxerO?editors=0010 by gregOnCodePen (@gregOnCodePen) on CodePen
- 2
-
VIdeo file is not opened
UPD: i can't check it on mobile safari
-
offtopic:
19 hours ago, _josch said:but did not manage to get the animation canvas inside because the folder with the images is just on my PC.
In codepen you can upload you files only on PRO Plans, or you can use external images or imagegenerators (example, example, example) and just focused on code
If you need specific images or it doesn’t work with these images, but everything works with others, then you can use codesandbox
- 5
-
30 minutes ago, Skilltech said:
As for the carousel init, carousel can actually be initialized via JS
I talk about event, not init. You can init carousel but didn't get callback does it init or not.
In my example you have 2 animations - after start (slide.bs.carousel event) and before end (function animationOut) you can place different animations there. I think, I don't quite understand you.
If you want listener for class was changed, you can use something like MutationObserver with property
attributes: true
With bootstrap carousel you have only 2 event callbacks
slide.bs.carousel
andslid.bs.carousel
- 2
-
Hi!
What did you try?
I think maybe this can help you
See the Pen XWzrMGX?editors=0010 by gregOnCodePen (@gregOnCodePen) on CodePen
I didn't find
init
event on bootstrap carousel so you need something like DOMContentLoaded or window loadI don't know why did
gsap.delayedCall
is not working on my answer so i use setTimeoutUPD:
I see some issue with last slide (on repeat). I think better use something like swiperjs with normal API or creat your own slider. I can't findonloop
,init
,beforeinit
,afterinit
,beforechange
,afterchange
Events on bootstrap carousel- 2
-
4 hours ago, ceescoenen said:
But only on pageload on the first slide it is there without animation
You use event
slideChangeTransitionStart
so it works only on slide changed (next, prev)Check Swiper documentation Events
You need to use Events like
init
orafterInit
orbeforeInit
, (if you create minimal example it was more clear) for animate first slide- 2
-
16 hours ago, feyberho said:
it posibly to use latest version of gsap?
Sure, you can rewrite it with gsap 3, check migration guide
The similar examples you can find by chosing filter by Technologies on awwwards site, chose Barba.js, GSAP Animation, Highway.js... filters
- 2
-
Please check Documantation page of ScrollTrigger
There is no property
ping
on ScrollTrigger, it must bepin: true
- 3
How to animate Opacity text animation while Scrolling
in GSAP
Posted
Hi @Lucacv
Welcome to the forum
Check ScrollTrigger free plugin and SplitText premium plugin