Sahil
-
Posts
1,002 -
Joined
-
Last visited
-
Days Won
71
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
ScrollTrigger Demos
Downloads
Everything posted by Sahil
-
There are multiple issues with your svg and demo, 1. You need drawSVG plugin to draw paths, you were also using really old version of TweenMax. DrawSVG plugin is part of club membership but on codepen you can use drawSVG plugin for free to practice and learn. 2. You don't need to manually use document.querySelector, GSAP uses it internally so you can just pass your query string. 3. DrawSVG plugin only draws paths, some of your paths seem to have no stroke and only has fill so it appears they are not being drawn. 4. Your svg elements seems to be using inline transforms which can cause issues in some cases, please take a look at SVG gotchas thread. Also, manually chaining each path might make it hard to make changes in future, you can use stagger tweens to achieve same effects. Also take a look at couple of great posts on how to do handwriting effect by @PointC
-
I assume you are referring to parallax scrolling on this page https://art4globalgoals.com/en/project Take a look at couple of demos in following threads, Also take a look at following article that discusses how different scrolling methods affect performance, https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/#lvzozB8m1fZOWgTt.97
-
Ya we rarely get such posts, probably 2-3 every month. But it might keep more people around forum. I would go with 'Jobs & Freelance'. While you are at it, consider making sub-forum for all NPM related questions. I would have also requested area51 but all of our moderators have vanished. seriously, where is everybody?
-
A tween or timeline can only have one parent. The only solution I can think of is to use functions to create your timelines so you can create multiple copies, but be careful while using from tweens.
-
It is really hard to tell you how you can create entire website. As you mentioned in other thread that you are beginner, I would recommend spending some time to get familiar with basics. You can start by visiting 'Getting started with GSAP' page https://greensock.com/get-started-js Take a look at following thread that discuss similar mouse effects, The parallax effect, The transitions, there is a lot going on in that site. It uses canvas for the background transition effects. My guess is it uses PIXI js. Which is pretty advanced stuff. You can visit PIXI js website to learn more about it.
-
You can include GSAP to your html site just like how you would any other JavaScript file. Create a js folder at the root and place your javascript files in it, and reference them in HTML as following snippet. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="default.css" /> </head> <body> <div id="container"> <div class="box one"></div> </div> <script src="js/TweenMax.js"></script> <script src="js/Draggable.js"></script> <script src="js/ThrowPropsPlugin.js"></script> <script src="js/default.js"></script> </body> </html> Because they are being included in the body tag you don't need to use any event to check if page has loaded or DOM is ready to be manipulated. Any code you write in default.js will run when page loads. https://developer.mozilla.org/zh-TW/docs/Web/Events/DOMContentLoaded http://learn.jquery.com/using-jquery-core/document-ready/
- 1 reply
-
- 4
-
-
Your logic was correct, but you were trying to animate element with id 'shape' but your svg has element with id 'from'.
-
Using invalidate method will cause GSAP to re-record the values. https://greensock.com/docs/TweenLite/invalidate()
-
I thought you figured it out. Here is fork of Blake's previous demo. Here I am calculating two lengths from where scan should start and end, it is being determined by how much your mouse has traveled. It works fine on curves and edges, except on sharp edges where angle is too small. Actually it works just fine if you set your goals realistically. If you want more control then you might want to go through Blake's second demo. Again to understand how everything works and how you can make changes as per your requirements, you will need to get through the fundamentals of how paths work and the code we have posted. @OSUblake Do I get the trophy?
- 30 replies
-
- 5
-
-
-
- timelinemax
- draggable
- (and 1 more)
-
You are using CSS transitions on those elements with .over class, which causes GSAP and CSS to try control the properties. I removed the transitions from your demo and it works fine in Firefox on windows.
-
You can add your tweens in a timeline and then pass that timeline to the setTween method. http://scrollmagic.io/docs/animation.GSAP.html#Scene.setTween GSAP doesn't have default duration on tweens, you will need to use to, from or fromTo methods to create your tweens. If you are not familiar with GSAP or timelines checkout the 'Sequencing and grouping tweens with TimelineLite' section on following page, https://greensock.com/get-started-js Also check the examples page on ScrollMagic, there are enough examples to find almost all solutions, http://scrollmagic.io/examples/
-
I am interested to give it a try, I might be able to do it tomorrow evening but don't consider it a promise.
- 30 replies
-
- 2
-
-
- timelinemax
- draggable
- (and 1 more)
-
Ya I was hoping an event that will fire before onPress. On mousedown, fire beforePress that will let user set the position or rotation of target. Only then fire the mechanism of onPress internally to record values of target like position, rotation etc. Draggable.create(target, { type: "rotation", beforePress: function() { // run logic to snap target to mouse before draggable starts recording values of target } }); And for the second part where I was saying to hold the onPress, following snippet might explain it better. Draggable.create(target, { type: "rotation", holdOnPress: true, beforePress: function() { // run same logic to snap target to mouse but let user animate the target TweenMax.to({}, 0.3, { onComplete: function() { this.initiateOnPress(); // The initiateOnPress method is going to be different than startDrag and it will skip beforePress event } }); } });
-
Hi Christian, Doesn't seem possible from what I have tested. We had similar question where users wanted to snap to mouse on click. You can read about what the code does in following thread, I modified it to animate but there are some issues, like if you click instead of dragging which is if you lift mouse before transition completes, your mouse keeps dragging still, and I didn't find any way to get around it. Fixed it by setting allowNativeDefaults to check if mouse is down. You can also use proxy target and use it's value for transitioning and dragging. But all this might be possible to simplify if @GreenSock adds another event before onPress, which we can use to do any calculations and snapping. And ability to hold the onPress event until we decide to trigger it. For example, onBeforePress we can do the transition and once our tween completes use the onComplete event to trigger onPress.
-
I doubt it's going to be easy. What I can think of is, let's say your mouse traveled 3 pixels, then compare closest points to the knob for 3 pixels and select one that is closest to the mouse. But there might be more problems to this solution, like lets say you move closer to the knob then you will need to add some conditional logic that will decide whether to move the knob or not. Blake might be able to suggest something but you will have to dive a lot deeper to pull it off. @OSUblake
- 30 replies
-
- 2
-
-
- timelinemax
- draggable
- (and 1 more)
-
Hi Puffywuffer, That has to do with how your path is created, and what are the start end points of the path. In following demo, if you change the shapeIndex you will see that it affects they way shapes morph. You can use the findShapeIndex utility to test which shapeIndex you want to use. Check out the following video, But it is great to get in habit of how you create your paths, so take a look at following post by @PointC where he explains how you can change your path's start point in illustrator.
-
Hi FatMunkey, With Draggable you can set a trigger element, which will basically let you drag the element but when you do that, your draggable target doesn't act as trigger itself anymore. In my demo, lets take a look at right handle. I am setting the right handle's trigger element as element iteself, top-right corner and bottom-right corner. Reason to do that is, so I won't have to repeat the same logic for corners. I can trigger same logic for corners using the border handlers. So when you drag top-right corner, it triggers both top border and right border. Why I am using triggers and what are they? Those are DOM objects that I am creating but not appending to any elements. The dollar sign was just something that people using jQuery use while creating variables that use jQuery object(initially I was using jQuery to create that demo but dropped it), so it has nothing to do with entire logic. I am creating those proxy elements to simplify the logic, if I use draggable on border elements directly, they will get thrown off out of their position and it will take a more complex solution to keep them in position. Does that help?
-
Check out the following thread that shows how you can drag along the path. You should able to draw your Path using total Length and knob's current position using that demo.
- 30 replies
-
- 2
-
-
- timelinemax
- draggable
- (and 1 more)
-
The transformOrigin only applies to transforms like scale, skew etc. not when you animate height/width. You will instead have to shrink your column1, column2 to achieve that effect.
-
I personally wouldn't code it like that because making any changes would be really hard, for example if you change number of panels then you will have to adjust everything else. Take a look at following similar thread.
-
You will need to animate multiple tspan elements.
- 1 reply
-
- 3
-
-
-
- textplugin
- svg
- (and 1 more)
-
The updateTo method only works with generic objects and not dom objects. In docs you can also see that you can get unexpected behavior for reversing tweens. https://greensock.com/docs/TweenMax/updateTo() What you are trying to do can be achieved using invalidate method. In following demo, onRepeat I am updating the values in vars object and then invalidating the tween. You can repeat the same logic for resize event so you won't see any odd behavior.
