Search the Community
Showing results for tags '3D'.
Found 52 results
-
Hi Everyone, I recently recieved a project for a tour and travels website. I was scrolling through many design and thought of creating a parallax website with 3D models, but I haven't created any up until now. So I needed some suggestions on how to start and where to get the resources. Also, will there be any performance issues when hosting the website. (Website is not Dynamic, More like a Gallery type for an agency). How do I optimize the performance of the website while building it? What thinks should I be aware of? Any suggestions will be helpful. Thank You.
-
Hi everyone! I'm really enjoying gsap so far, its capabilities are truly spectacular! I'm trying to create an effect of a <div> rotated in the 3d space rotates back to the XY plane while simultaneously slides down to match the position of another <div>. The effect I aim to replicate can be found here, more precisely the image on the computer screen rotating and sliding down. I want to avoid having to use fixed values for the translation and thought about using Flip.fit() for moving the target element into place together with a scrollTrigger. Alas, it seems as if the 3D rotation is not being considered by the function, resulting in an awkward final state for the sliding element. Does anybody have any ideas on what's going wrong and how I could implement this?
-
Hi everyone I've started yesterday playing around with GSAP for work and so far i'm having a lot of fun :D. My objective is to have a simple 3d object at the center of my scene and a camera to rotate around it. So far so good. But i'm having trouble implementing a reset function for the camera, when a button is clicked the camera should go back to the starting position with an animation. https://jsfiddle.net/tomthebearded/dkug68to/ As you can see when you run the jsfiddle what i've tried until now is changing the position of the camera with gsap.to but it's not right effect for my project. Changing the position in this way makes the camera basically move close to the center before moving out to reach the final position. What i need is more a rotation around the object to reach a defined position. Is there a way to achieve this?
-
Hello everyone, Let explain my problem, I am currently moving an object a long a x,y,z axis (in threejs). I want to have complex trajectory, like a looping : i tried to use the motion path plugin in order to do interpolation across multiple point. So far so good, but i need to use the bezier type in order to make it as a real looping (not a cubic one :) ) but bezier type seems supporting only x and y axis. The other main problem is to slow down the moving element on mouse hover, i think using the timeScale function on hover will do the job perfectly. Do you have any hints ? Thanks a lot
-
I have this below svg in my web application: and i have two buttons to rotate this element clockwise/anticlockwise 3d through y axis when user click on each button, how can i do that? is it possible to do it with Snapsvg? There is also this question on SO: https://stackoverflow.com/questions/61685984/rotate-svg-element-3d-with-javascript-or-jquery
-
Javascript freelancer to create 3D animation using GSAP (Greensock)
Andressa B. posted a topic in Jobs & Freelance
We are looking for GSAP (Greensock) Animator to create an effect like this https://www.shutterstock.com/video/clip-1040785964-3d-rendering-2019-color-year-hexagon-seamless.We'll add the animation to our product login screen. There's a picture of this screen attached, which is also a reference of the color for the hexagons.This codepen effect might be helpful, but it's not exactly what we are looking for, because it doesn't have a wave.https://codepen.io/aslan11/pen/IxLDJThe idea is that the animation will happen when the user clicks on the "Log in" button.We want this to be done with GSAP, but we are open to other technologies such as animated svg as long as it has a good result. The deadline for this project would be up to 3 weeks. Payment: fixed price, open to proposals.
-
Hi guys, I've been a long-time enthusiast for GSAP, although just a designer and only now gathering coding skills – much praise for the library and everyone involved. What I'm trying to do is create an Earth globe rotating slowly For a close example, see "Cloud with Google" (skip the intro), except all I want is the globe, no fancy gadgets and on-click events/interaction Any help or pointers in the right direction will be appreciated, and don't avoid unpleasant questions, I'll be responding to everything as fast as I can Trying to do this with Three.js & TweenMax, though I'm open for other solutions as well – doing this for both practice and learning, tired of having other people develop for me and mess up the small stuff, time to amp my skills up. I'll be adding the codepen when I get anywhere, still at blank page Cheers to all, hope everyone's warm and cozy
-
Hi, I have a card game which currently handles the cards dragging by simply editing the rotationX and rotationY depending on the mouse movement direction. Then in the onEnter loop I "force" the rotationX and rotationY to move towards 0 by slightly increasing/decreasing their value on each frame. This results in a quite poor 3D effect movement since the transition isn't smooth enough, plus it doesn't feel like a 3D transition (since it's obviously only 2D). We are using plain Flash for this, so no CSS or JS can be involved, we only use GSAP tweens. Our aim, is to create something like hearthstone achieved, a very smooth movement which depends on the position of the mouse-center of the card, as implemented here by @dstnation. We do handle the smooth transition of the card from its position to the mouse cursor by using just one line of code on the 'onEnter' function, basically: protected function onEnterFrame(e:Event):void { if(mMouseTarget && mMouseDown) { //Handle the position of the card 'x' and 'y' TweenLite.to(this, 0.2, {x:mMouseTarget.x, y:mMouseTarget.y}); } } mMouseTarget's position is filled on the onMouseDown, along with the mMouseDown variable. We are nevertheless, having a hard time trying to figure out how to do something similar with the rotationX, rotationY and (perhaps?) skewX/skewY to achieve a 3D effect? Does anyone have any idea on what could we try? Thanks beforehand
-
Hi guys, for some reason I can't get the 3d transform perspective working on my splittext animation - see codepen... It only seems to be working in Chrome / Mac. Any ideas? Thanks!
-
Hi I saw this website today (link below), where there is text being animated along a 3d path by the look of it. Is it possible to do something similar in Greensock. I've got a pretty good grasp of the basics of GSAP, but was wondering where to start with something like this. https://www.arche68.com/front/en Many thanks for any ideas Paul.
-
Hello, Anyone knows how to make this codepen example in PIXI.js? The example is made using css properties. I need it to make it in PIXI and I was wondering if anyone knows how to do this. Thanks, ukw
-
Hi, This is broad question. How can I create something like the pen i mentioned through GSAP. (A detailed explanation would be really helpful as I'm a noob) Thank you 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!
-
Hi, I'm new to GSAP and I'm trying to find a way to create an interactive map using a JPG image as the basemap and canvas and GSAP for the animation. I came across several examples on the GSAP website and a live project online that looks exactly like what I'm intending: http://rainforest.arkivert.no/#kart Can you tell me how is this done, or if there are any documentation/tutorial/workshop materials that I can go through. Please advice. Thanks in advance, Hagop
-
Guys, I've used greenock before on website deployments but I'm no expert, we're going to be using it much more now and the first project we've come up with is (as usual) tricky. Is it possible within GSAP to replicate something like this? Seems ambitious but I'm sure GSAP can handle it Interested in any other threads that discuss these principles. Needless to say I'm trying to avoid defaulting to After Effects.. Buzz
-
Hi, We are having issues trying to finesse a card folding animation. Basically we would like to have a square with sides folding out from within the square to create an unfolding effect. If you take a look at the Codepen you should be able to get an idea of the effect. We are currently using scaleX but unsure if this is the best and way to achieve this type of effect? Many Thanks
-
Hello, guys. I know I could post this on some job boards, but just wanted to give it a try here. I noticed that on this forum people discuss three.js sometimes. And there is a project I need help with. Commercial project — no free work There will be website with swimming pool constructor on it. Initially we planned to make it flat. But I'd like to go further and make it as dynamic 3D model directly in browser. So I'm looking for a specialist who has experience with three.js and GSAP to help me with this part of the project. I already have scope of work composed for coder. I will send it to those who are interested. You just need to let me know whether you're interested either in this topic or in personal messages. And here is a small teaser of the project
-
Hey guys! Im trying to recreate this as an SVG animation using greensock. I got stuck pretty quickly with a diagonal fold (I'm new to 3D). As you can see, I'm about halfway there! But it doesn't fold quite like it should. I need it to fold like it would with paper, across the diagonal line with no flipping. Any ideas?
-
Hi everybody, I used to work with Greensock API inside Flash (swf), Edge Animate, and, now, in Hype Pro since Edge has been abandonned by Adobe this year. I try to extend Hype features with a GSAP Tweenmax API. But, I cannot obtain 3D real perspective with imbricated symbols. I could get this inside Edge. Why is there a problem with Hype Pro ? I send you the Hype pro file to check it. Thanks for your help. I wrote this code : CSSPlugin.defaultTransformPerspective=700; var wall = document.getElementById("wall"); TweenMax.set(wall,{rotationY:45, transformPerspective:200, transformStyle:"preserve-3d", force3D:true}); TweenMax.to(wall,4,{rotationX:180}); TweenMax.to(".square",4,{rotationY:720}); imbrication3D.hype.zip
-
Please, could You explain me why the rotationX params doesn't fit like rotationY & rotationZ in my 3D cube test?
-
Hello, how do i change an effect when scrolling to next slide? I was trying to find some effect options in this codepen - http://codepen.io/bassta/pen/kDvmC but I didnt succeed. For example something similiar to this - http://www.bistroagency.cz/ They use some transitions between each slide, It kinda looks 3d. Thank you!
-
Having trouble understanding 3D transformations. I took a look at this page: https://greensock.com/css3/, but while they provide great demos, the code isn't shown so I can analyze and learn from it. In my pen demo ( ), I'm struggling to understand why my transforms do not animate smoothly to a 90 degree rotationY. When the animation starts it jumps and then animates the rest of the way...of course not the intended effect. Any assistance is appreciated. UPDATE: Ok, so I figured out I guess the parent container needed a perspective set. Now they animate smoothly, but at 90 degrees I'd expect them to disappear and I can still see them on an angle?
-
I'm trying to make a simple cube made from 6 divs for the faces and a div to contain it. Seems to work ok at first, but when I apply a tween to the container div it flattens the contents rather than applying transforms to the faces individually. It's hard to explain but you can see what's going on in the codepen here: http://codepen.io/insomniagfx/pen/PqWPRZ/ Is this approach viable, or do I need to rotate all six sides independently to get the effect I'm going for?
-
Since that draggable could be used to drag and rotate one element in 2d platform, I'm wondering that is it possible to control the element to rotate in 3d? I've found that there's a codepen http://codepen.io/MAW/pen/doPLME showing how to make one element both draggable and rotatable in 2d, but I can't find any way to expend this method to 3d rotation. I know that I can setup two sliders to control X rotation angle and Y rotation angle, but what I want most is some sort of "control point" to make the 3d rotation happen. Could you please give me some advices? Thanks!
-
Hi everyone! Pretty simple question here, is there any way to tween a transform-rotate more then 360º. For anyone not super familiar with 3d transforms: Simply put, the limitations of matrix3d means you cant rotate more then 360º by passing values more then 1 or less then -1. Because of this you need to loop from states -1 to 1 if you wish to rotate multiple times. Is there any built in functionality for this? or is there an easy way to loop through the transform rotation? Thanks, Daniel Example of the 360º transforms I have been using: var tiltX = function(x){ return "matrix3d(1,0,0,0" + ",0,"+ Math.cos(x) +","+ -Math.sin(x) + ",0" + ",0," + Math.sin(x) +","+ Math.cos(x) +",0," + "0,0,0,1)"; }; TweenLite.fromTo($(".subdiv"),2, {css:{transform: tiltX(3.1415)}} , {css:{transform: tiltX(-3.14159)}} ); OR TweenLite.fromTo($(".subdiv"),2, {css:{transform:"rotateX(-179.99deg)"}} , {css:{transform:"rotateX(180deg)"}});
