Search the Community

Hi, I'm implementing ScrollTriggers with pinning on a website I'm working on but having issues when accordions are being opened/closed. When the user scrolls to the product image gallery it becomes pinned to allow for the scrolling of the product content. This works great initially but once I open the INGREDIENTS tab (any tab for that matter), it obviously increases the height of the parent container while the slider stays the height of the viewport. But if I scroll down to the next product, that products slider jumps. You can see a video reference here and you can also see this in the browser by visiting: https://eldetalleusa.myshopify.com/ (view at a 13") This is the code that I'm using to init the ScrollTriggers is: this.fixedElements.forEach(element => { ScrollTrigger.create({ trigger: element, start: "top top", end: "bottom top", pin: true, markers: true, pinSpacing: true, }) }) And the code I'm using to trigger the ScrollRefresh is: I've also tried ScrollTrigger.update() this.accordions.forEach(accordion => { accordion.addEventListener('click', e => { ScrollTrigger.refresh() }) }) Any help would be greatly appreciated. Thanks, Dayne

this.menuTimeLine = gsap.timeline({ paused: true, }); this.menuTimeLine .fromTo(this.ref.menu, { x: "-100%", }, { x: "0%", duration: this.state.open ? 0.3 : 2, ease: this.state.open ? "linear" : "expo.out", }, 0).reverse() if (this.menuTimeLine.reversed()) { this.menuTimeLine.play() } else { this.menuTimeLine.reverse() } Button.addEventListener('click', () => { if (this.menuTimeLine.reversed()) { this.menuTimeLine.play(); } else { this.menuTimeLine.reverse() } }) Update Prop or Tween value conditionally whatever it is normal gsap or gsap timeline In Gsap version 2.x.x updateTo can update tweening values or gsap props but what to do in gsap 3.x.x or Gsap vars can help in this issue ? in Codepen example dynamic ease or duration ? besause timeline is outside of onClick ?

Hello Here are different versions of gsap. when gsap 2.0.2 is used text is text hover effect is showing correctly, https://codepen.io/Sarvarkhuja/pen/dyPjPVg However, when i update gsap version to 3.0.5, opacity of text is being set to 0 https://codepen.io/Sarvarkhuja/pen/ExadQjw I would appreciate any help to get the same result in the latest gsap version regards

Hello GreenSocks, I cannot get syncing / resetting a draggable to work. Please, see my pen. The red dot is a (Draggable) slider. When user changes number of control points, I remove the transform on the target and call Draggable.update(). But unfortunately, the x property remains the same. Would be great if you could have a look at it! Roelof potatoDie

In my last post on this subject, everything was going swimmingly with the "myImage.load(true);" being introduced to the scenario, when the user gets to the "take a picture" part of the app it works perfectly, they can retake the picture over and over and it loads the new image right away using " Object(root).faceW.myImage.load(true); " from my Camara MC. now my new problem is if they (the user)want to go back and retake the picture after clicking finished(the app at this point has moved the play head to the next frame), the retake button takes back to the frame with the Camara loader but the image is no longer updated after taking any new pictures, only f you quit and restart does the new image load. any ideas on whats happening ? import com.greensock.*;import com.greensock.loading.*; import com.greensock.events.LoaderEvent; import com.greensock.loading.display.*; import flash.filesystem.*; LoaderMax.activate([ImageLoader]); var file:String = "IMG_happy.jpg"; var mypic:File = File.applicationStorageDirectory.resolvePath("Photos/"+file); var myImage:ImageLoader = new ImageLoader(mypic.url,{container:this,x:0,y:0,width:414,height:309,onComplete:onImageLoad}); myImage.load(true); function onImageLoad(event:LoaderEvent):void { TweenLite.from(event.target.content, 1, {alpha:0}); }

Hey there guys! I've spent a good deal of time trying to figure this out - so now I've decided to ask a bit of help. When running and reversing timelines, the properties might change. Is there a way of updating these properties on the fly? I've come up with a small example, check out the codepen! Please let me know if you need me to clarify anything

Hi there, i'm working on a responsive website right now and the issue i'm having implementing greensock to it is when the user resizes the window and a few values like height/width of elements don't get updated unless user refreshes the browser. I was wondering if there's a way to update a few variables everytime the user resizes the window? Cheers, Thales

Can i change the elements of a timeline? I'm removing all canvas elements from #bg1 and then adding new ones. How can i update the existing timeline? var tl = new TimelineMax({paused:true}) .add(new TimelineMax() .staggerFromTo($('#bg1 canvas'), 2, {css: {autoAlpha:1}}, {css: {autoAlpha:0} },.25).duration(0.7) )

Hey guys, I am wondering if there is an easy way to convert a 'classic tween' or 'motion tween' to use the new AS3 TweenLite? Maybe a script of some sort? I have a project that has lots of classic tweens spanned across the timeline. I was hoping for an addon to the right click menu in Flash CS6 like 'Convert classic tween to TweenLite' or something as easy. Forgive me if this has been answered already as I have searched the forums and came up empty. Thanks in advance.