gargara1

I have an absolute div that I am using as Draggable and also I need to add it resize-x functionallity. So the resize from bottob right was pretty easy, I just set up a handle which was draggable by its own and just change the width of the element: const rightHandles = document.getElementsByClassName('drag-handle-right'); rightHandles.forEach((e)=>{ const targetDiv = this.$refs[e.dataset.parent]; Draggable.create(e, { type: "x", onDrag: (event) => { const {clientX} = event; const {left} = targetDiv.getBoundingClientRect(); const width = clientX - left; targetDiv.style.width = width + 'px'; this.objectsWidth = width; } }) }) Unfortunately the bottom left handle is a nightmare. The major problem is that the div is very hard to make appear growing from right to left, I need to add style.left property simultaniously with style.width and it becomes a big mess. I know this is not exactly gsap related question, but more of a javascript etc. question, please do not stackoveflow me. If someone can give me a hint that would be great. If there are other solutions with differen approach I will be happy to let me know.

Hello guys, thank you so much for the answers and the help provided. Anyhow in my case there were no codepen that can help with the problem. I found out what is causing this problems with the tweens in the application. It turns out that I have classes on parents div's that has transitions added to their styles. These transitions got forwarded to child elements and messed up with the gsap tweens. For example set method results into animation. I have not found anyone else experiencing similar problems, so I hope this will help someone else who may be facing such troubles.

I am using GSAP in laravel - vue 2 application, but my tweens speed is slower than the duration I set. I suppose it has to be something with frame rate. This is throughout the whole application. I use "gsap": "^3.10.4", please if anyone else experienced similar problem to let me know if there is a way to fix it. This is a simple example of how I use it: const tween = gsap.to(this.$refs.userMenu, { height: "210px", duration: 0.2, }); tween.play(); console.log(tween); Although the duration is set to 0.2 and is correctly applied to the tween it takes around a second for the tween to finish. Any suggestions will be greatly appreciated.

Hi guys, so I figured out what is the problem but I am not sure how this can be fixed. So the problem is that when the stage is scaled down, the movie clips nominal bounds are the same as when it is not scaled down , so they don't change accordingly. Do you happened to know how to update the nominal bounds in run time?

Hi guys I am running in problem when with my slider. I am using Tween Max to tween some MC's into the stage center, which works great except when I rescale the stage and then my mc's are moved to the left. I console logged everything and it is ok, stage center is fine, all is fine, so I am thinking the mc's are the problem. If anyone can help me with an advice will be very good to know. Here is a link to the slider and some code that I wrote, all critique will be well received :) https://bellavistabulgaria.bg/test/timeline/timeline.html createjs.Touch.enable(stage); createjs.Ticker.interval = 10; window.addEventListener('resize', resizeCanvas1); this.slider.on("mousedown", onMouseDown.bind(this)); this.slider.on("pressmove", onMouseMove.bind(this)); this.slider.on("pressup", onMouseUp.bind(this)); this.slider.originX = this.slider.x; this.slider.originY = this.slider.y; var mc = [this.mc0,this.mc1, this.mc2, this.mc3, this.mc4]; var boundsYear = [this.year0.nominalBounds, this.year1.nominalBounds, this.year2.nominalBounds, this.year3.nominalBounds , this.year4.nominalBounds]; var current_mc=this.mc0; var previous_mc; var next_mc=this.mc1; var oldX = 0; var currentX = 0; var mc_counter = 0; var num_mc = 0; var enabled = false; var stageW = stage.canvas.width; TweenLite.to(current_mc, 1, { ease: Power1.easeOut, alpha:1, x:stageW/2}); this.mc0.gotoAndPlay(1); var previous = 0; var myTimer = setInterval(playNext, 5000); function resizeCanvas1(){ stageW = stage.canvas.width; boundsmc = [exportRoot.mc0.nominalBounds, exportRoot.mc1.nominalBounds, exportRoot.mc2.nominalBounds, exportRoot.mc3.nominalBounds , exportRoot.mc4.nominalBounds]; } function playNext(){ if(num_mc< 4){ current_mc = mc[num_mc]; previous_mc = mc[num_mc+1]; TweenLite.to( current_mc, 1, { ease: Power1.easeOut, alpha:0, x:-(stageW/ 2), onComplete:bringBackFrame1}); TweenLite.to(previous_mc, 1, { ease: Power1.easeOut, alpha:1, x:stageW/2 )}); console.log(stageW/ 2, current_mc.x ); previous_mc.gotoAndPlay(1); TweenLite.to(exportRoot.slider, 1, { ease: Power1.easeOut, x:(exportRoot["year" + numplus].x + (boundsYear[numplus].width/2)) }); num_mc++; } } function onMouseDown(evt){ clearInterval(myTimer); var item = evt.currentTarget; item.offset = {x:0, y:0}; var pt = item.parent.globalToLocal(evt.stageX, evt.stageY); item.offset.x = pt.x - item.x; item.offset.y = pt.y - item.y; item.drag = true; } // mouse up event function onMouseUp(evt){ var item = evt.currentTarget; item.drag = false; myTimer = setInterval(playNext, 5000); } // mouse move event function onMouseMove(evt){ var item = evt.currentTarget; if (item.drag){ var pt = item.parent.globalToLocal(evt.stageX, evt.stageY); item.x = pt.x - item.offset.x; setTimeout(function(){ oldX = exportRoot.slider.x; }, 5); currentX = exportRoot.slider.x; } if (oldX < currentX){ for (var i=1; i<5; i++){ if(item.x > exportRoot["year" +i].x&&item.x < exportRoot["year" + i].x + boundsYear.width){ previous = i-1; current_mc = mc; num_mc = i; previous_mc = mc[previous]; PlayForward(); } } } else if (oldX > currentX){ for (var i=1; i<5; i++){ var previous = i-1; if(item.x < exportRoot["year" +i].x&&item.x > exportRoot["year" + previous].x + boundsYear[previous].width ){ current_mc = mc; num_mc = previous; previous_mc = mc[previous]; PlayBackward(); } } } } function PlayForward(){ for (var i=num_mc; i>0; i--){ TweenLite.to(mc, 1, { ease: Power1.easeOut, alpha:0, x:-(stageW/ 2), onComplete:bringBackFrame}); } if(current_mc.currentFrame==0){ current_mc.play(); } TweenLite.to(previous_mc, 1, { ease: Power1.easeOut, alpha:0, x:-(stageW/ 2), onComplete:bringBackFrame}); TweenLite.to(current_mc, 1, { ease: Power1.easeOut, alpha:1, x:stageW / 2 }); } function PlayBackward(){ for (var i=num_mc; i<5; i++){ console.log(i); TweenLite.to(mc, 1, { ease: Power1.easeOut, alpha:0, x:(stageW + stageW/ 2), onComplete:bringBackFrame1}); } if(previous_mc.currentFrame==0){ previous_mc.play(); } TweenLite.to(current_mc, 1, { ease: Power1.easeOut, alpha:0, x:(stageW + stageW/ 2), onComplete:bringBackFrame1}); TweenLite.to(previous_mc, 1, { ease: Power1.easeOut, alpha:1, x:stageW / 2 }); } function bringBackFrame(){ previous_mc.gotoAndStop(0); } function bringBackFrame1(){ current_mc.gotoAndStop(0); }

Hi guys, I am developing one motion heavy portfolio and I have a very strange problem only on mobile. In the web site there is a canvas with animation, that I tween when user scrolls down. TweenMax.to("#canvas1", 0.5, {y:"-80%", ease:Power3.easeIn, onComplete: smallOver}); This works perfectly on desktop, but in mobile it is causing the <iframes> in the content below to scroll faster then the rest of the content (they are also canvases). The particular thing is that if I don't tween the canvas everything works great. I tried without the function at the end and it stills causes this problem: TweenMax.to("#canvas1", 0.5, {y:"-80%", ease:Power3.easeIn}); I also added console.logs so you can see when it is called. Please if somebody have any idea what can be the problem to let me know. Here is a link: https://bellavistabulgaria.bg/test3/site/index.html