Search the Community

Hi there! I'm trying to create a scrolling effect like this: Scroll / Parallax effect If you scroll the page down and the image is in the viewport, it will receive a dynamic translate3d on the y-axis between 0% and max. +25% (based on scroll ). If you scroll the page up, it will be reserved (up to -25%). I'm still a JS beginner, below you can see my attempt with GASP/ScrollMagic/TweenMax. Unfortunately this is still not like in the example above. The parallax-item stops moving at a certain point although it is still in the viewport and you keep on scrolling. Moreover the speed is too fast. I guess I have to modify the offset and duration ScrollMagic-Options (?) but I don't know what I should exactly do. I know that ScrollMagic and animation.gsap are not GSAP products but maybe someone can help me. Thanks in advance!

I would like to know how can I do this kind of 3D movements and interactions on scroll: http://act.mit.edu/cavs https://juliebonnemoy.com/ https://fontface.ninja/ All this examples use a div "scroll-wrapper" as a scroll container with a css: transform: translate3d(0px, -361px, 0px) I always used scrollmagic but now I think its an old solution... recommendation, advice? Thanks!

I have a carousel that animates by xPercent when clicking menu buttons. I also use the Draggable with ThrowPlugin on the carousel to swipe left and right on sections of that carousel. The menu tween uses xPercent (which is what I want, since the carousel keeps its place on window resize) But the Draggable tween uses either translate3D or matrix by pixel values and not percentages. By the way, I'm use an array for snap: {x: [pos1, pos2, pos3]} I've been able to figure out the new percentage and remove the translate3d value using 'onThrowComplete', but the Draggable values is not cleared. So my questions are: 1. What is the best practice to integrate a regular tween and a Draggable tween on an element, when xPercent is required on the regular tween? 2. What is the correct way to flush out any values when a Draggable event has completed? Any help would be appreciated. Thanks in advance.

Hi super coders! I really need some help from you guys, i've been trying for hours with no positive results so i finally decided to post it here. In my pen, there are 2 buttons to run the animation, right now it is using CSS transforms & transitions but will have gsap as i will animate the cube with some infographics to. Right now I just want to have the basic parts done. Ok! so i have 2 problems: 1) the left face of the cube is not in the right place, i need to place it in its respective space and to have the same animation it has right now. I want it exactly like this: http://www.f-lohmueller.de/pov_tut/backgrnd/im/CubeMappingWrapping_1d_64.gif 2) all the faces have inner and outer images, when the front face opens the image has some flickering (the outer image is shown when the inner image has to be seen) Bets of bests and thanks in advance! ~cm

Hi Folks, I am not sure this is a GSAP issue, but it is only happening to draggable elements in my project. I apologize if I missed something obvious, but I've hit a dead-end. My project uses draggable buttons of various sizes in a graphical test environment. This project has been running fine for a year but now it is giving me trouble only on my Android Nexus 7 test tablet. Everything works great on iPad and all modern desktop browsers in Mac & Windows. Take a look at the two images I have attached. The "draggable_sample_correct.jpg" image shows what the 3 draggable buttons should look like. The "draggable_sample_Android-bogus.jpg" image shows what it looks like on my Android device. I noticed that the transform: translate3d style is altered. I can't figure out where this transform is coming from in the first place, and why it's different on Android in the second place! The dragging behavior is inconsistent as well. On Android, when I drag one of the buttons onto a target and let go, it sometimes goes to its correct home position... at other times, it goes to a new incorrect position. Here is my setup and onDrop functions, which have not been touched for a year. This used to work on this same test tablet, but now I'm wondering if some update to Android has caused the problem? var setupDroppables = function(theDropClass) { // DRAG N DROP var droppables = $(theDropClass); var overlapThreshold = "50%"; var targetContainerDiv = "#singleVtarget"; switch (theDropClass) { // There are several styles of drag & drop question layouts. case ".threexDnDsideBySide": targetContainerDiv = "#threeUpVtargets"; break; case ".twoxDnDsideBySide": targetContainerDiv = "#twoUpVtargets"; break; case ".blueDnD": targetContainerDiv = "#singleVtarget"; break; case ".twoxDnDstacked": targetContainerDiv = "#singleVtarget"; break; case ".threexDnDstacked": targetContainerDiv = "#singleVtarget"; break; case ".scenarioSel": targetContainerDiv = "#singleVtarget"; break; } Draggable.create(droppables, { bounds:window, onPress:function() { TweenLite.set(targetContainerDiv, {autoAlpha: 1, display: "block"}); }, onDrag: function(e) { var i = targetArray.length; while (--i > -1) { if (this.hitTest($(targetArray[i]), overlapThreshold)) { console.log("we're on it!"); $(targetArray[i]).addClass("highlight"); } else { $(targetArray[i]).removeClass("highlight"); } } }, onRelease:function(e) { var i = targetArray.length; while (--i > -1) { if (this.hitTest(targetArray[i], overlapThreshold)) { onDrop(this.target.id, targetArray[i]); TweenLite.to(this.target, 0.5, {x: 0, y: 0, ease: Bounce.easeOut}); $EV_SoundManager.playSFX("throb018"); return; } } $EV_SoundManager.playSFX("throb018"); TweenLite.to(this.target, 0.5, {x: 0, y: 0, ease: Bounce.easeOut}); } }); }; // FLASH THE BORDER IF THE CORRECT DROP var onDrop = function (dragged, dropped) { var thisSelection = dragged; var thisPos = targetArray.indexOf(dropped); var correctChoice = correctChoices[thisPos]; var thisIndex = buttonArray.indexOf("#" + thisSelection); if (thisSelection == correctChoice) { isCorrect = true; if (jQuery.inArray( thisSelection, correctQuestions ) == -1 ) { correctQuestions.push(thisSelection); } animateMsg(questionArrayRandom[currentQuestionIndex], correctStatements[thisIndex]); TweenMax.fromTo(dropped, 0.1, {opacity:1}, {opacity:0, repeat:3, yoyo:true}); } else { isCorrect = false; incrementAttempts(); animateMsg(questionArrayRandom[currentQuestionIndex], incorrectStatements[thisIndex]); hideTargetVContainerDivs(); $(dropped).removeClass("highlight"); } }; Any insight or leads for solving this are greatly appreciated. Thanks! --Kevin

I have a site that lets users drag through a series of pages horizontally. When they reach the end of a series of pages and they drag the container, the edge-resistance kicks in. As they continue to drag against the resistance, the container still moves to the left revealing the background behind. This is how the site is supposed to work. This is how it used to work a few months ago. Now what I see is different. When I drag past the right edge, I can see that the scrollbar is "stretching" indicating the edge-resistance is working. However, the container does not move past the edge. It seems like the transform: translate3d() is not working. I can see the number growing in ie translate3d(-1px, 0px, 0px) -> translate3d(-2px, 0px, 0px). But the container is not moving. Did something change? I first noticed this problem in Firefox, but with the latest version of Draggable, I see it in Chrome, too (it still works in IE). Here is a simplified demo: Codepen URL: http://codepen.io/stephendlei/pen/azQaPb Dragging the first (green) block past the left edge produces the desired result. But moving the last (red) block past the right edge does not. The red block doesn't move and the gray background is not revealed. Note: If I cut down the number of blocks to just 1, the behavior will work as expected. Is there something I'm doing with the inline-blocks that is causing issues?

Can't i use translate3d in my tweens? I see x and y for translate, but no translate3d!