Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 06/07/2018 in all areas

  1. Shaun Gorneau test
    Oh, I see. I thought you were having problems with the navigation. To stop the default behavior of the browser "jumping" to a fragment identifier on page load, you use a bit of Javascript to tell it to not do so and then check to see that the fragment identifier exists on the page then scroll to it Here is what I do on a few sites to handle this ... note, I make use of jQuery, so there is a bit of it here. If you don't use jQuery, you'll have to unpack those out to native JS. I've commented to help point out what is doing what. setTimeout(function() { if( location.hash && $(location.hash).length > 0 ) { // if there is a hash in the URL and that ID exists on the page window.scrollTo(0, 0); // <- Keeps the page from jumping by default setTimeout( function() { $('body').animate({ scrollTop: $(location.hash).offset().top-70 //-70 is specific to my case because of a fixed navbar }, 1500); }, 1300 ); // This is my delay so the smooth scroll doean't start immediately ... adjust to your needs } }, 1);
    3 points
  2. Sahil test
    Ya certainly possible, here is one demo by @OSUblake and you will find some more useful posts and demos by him on forum or codepen profile.
    3 points
  3. Sahil test
    GSAP doesn't support 'inherit' and treats it as any random string that wouldn't be a color so it animates to default rgba value. I understand what you are saying about clearProps, I think it has to do with the how add method works. @GreenSock can explain more accurately what is happening in this particular case but in the mean time take a look at following thread with similar issue. I instead used set method of timeline directly and it works as expected.
    3 points
  4. Shaun Gorneau test
    Ah, yes @PointC! You bring up a point I forgot to highlight!! In the example, I removed the timelines and created individual tweens but I didn't explain that change! Thanks for pointing that out!
    2 points
  5. PointC test
    I couldn't really tell if you wanted a delay on hover or not, but here's an additional approach creating a timeline for each <li> and play/reverse on hover. The way you had it in your demo, you were just adding tweens to the main timeline on each hover. That's why they played in sequence. Happy tweening.
    2 points
  6. Shaun Gorneau test
    Hi @Robero, Sounds like you're looking for two things to happen That any Tween started on mouseover will backout (reverse itself) immediately on mouseout That mouseover should have intent detection; i.e. a short delay that allows someone to pass through the item without firing the mouseover handler I've put together a CodePen illustrating how to make this happen
    2 points
  7. PointC test
    You're creating a new timeline on scroll in your handleStepProgress() function which is causing a bunch of overwrites. If you create the timeline outside of that function and pause it, I think you'll see the desired results. Happy tweening.
    2 points
  8. GreenSock test
    First of all, welcome to the club! Thanks so much for joining. The problem with the page at that link is just that you've got your JavaScript code executing BEFORE the element even exists on the page. Your <script> tag has SplitText("#quote") and then later on you've got <div id="quote">. So when SplitText tries to find that element, the browser hasn't even gotten to it, thus it doesn't exist. The solution: either move you <script> stuff to the bottom of your <body> tag, or you could wrap your JavaScript in an onload so that it doesn't actually execute until the whole page has finished loading. Oh, and I also noticed that you're loading TweenMax, CSSPlugin, TweenLite, EasePack, and TimelineLIte but you only need to load TweenMax for all those because it contains TweenLite, CSSPlugin, EasePack, and TimelineLite inside of it already. It's not "wrong" to load the other files - it's just wasteful kb-wise, that's all. Redundant. Let us know if you need anything else. Happy tweening!
    2 points
  9. Carl test
    Hi, In the docs you referenced there is a note about this exact scenario IMPORTANT: There is no way to get pixel-perfect hit testing for non-rectangular shapes in the DOM. hitTest() uses the browser's getBoundingClientRect() method to get the rectangular bounding box that surrounds the entire element, thus if you rotate an element or if it's more of a circular shape, the bounding box may extend further than the visual edges. IE8 (and earlier) is not supported because hitTest() requires element.getBoundingClientRect() which is in all modern browsers. Unfortunately, that isn't something that can be easily solved at this time. However the following thread has a bunch of demos (mostly by @OSUblake) that illustrate a number of techniques that you may find interesting and worth exploring further.
    2 points
  10. Shaun Gorneau test
    You'll need two different menu php files or some logic in your one menu.php. Basically ... if #about, #services, and #contact are not ids on the current page ... you want to route the user to those ids on index.php. So, basically you want some logic that asks "are #about, #services, and #contact on this page" ... if so <ul> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> <li><a href="/terms.php">Terms</a></li> </ul> If not, do this <ul> <li><a href="/#about">About</a></li> <li><a href="/#services">Services</a></li> <li><a href="/#contact">Contact</a></li> <li><a href="/terms.php">Terms</a></li> </ul>
    2 points
  11. themepunch test
    Thank you ! I read the other post and it brings some light in the darkness. I think i will need to give a second look on the suppressEvent variable as well. Even using Greensock since Flash Time i can learn tons of new things . So again thanks for your feedback and have you all a great day ! Greetings from the ThemePunch Team !
    2 points
  12. PointC test
    You have duplicate timelines for the knife and the guy. Why not make the knife a child of the cloud-wrap? That way you only have to manage one movement timeline and the separate knife timeline will work correctly. Hopefully that helps. Happy tweening.
    2 points
  13. PointC test
    As @Sahil mentioned, they are using canvas for those transitions. You could probably use a Pixi displacement filter and come up with something similar. Here's a demo of Pixi filters. http://pixijs.io/pixi-filters/tools/demo/ And the main Pixi site. http://www.pixijs.com/ Your other thread mentioned you were a beginner so I'd recommend trying some less complicated animations to get started. That website you're referencing is pretty advanced and would probably be quite frustrating to start with something that ambitious. Good luck with your project.
    2 points
  14. GreenSock test
    Sure, you can have as many as you want. The problem in your example was just that you weren't targeting things correctly - you're missing a period: //bad: "box" + count //good: ".box" + count (to indicate it's a class) Does that help?
    1 point
  15. Friebel test
    Yes!! That was it. Thanks for the quick response @GreenSock Jack! So I guess that means Webpack is not using treeshaking during development, so you can only tell after a production build if everything survives treeshaking... that's kind of scary, but good to know now! Glad it works! Thanks again Jack!
    1 point
  16. GreenSock test
    All the CSS-related wizardry comes from CSSPlugin. I bet Webpack is tree shaking it out of your bundle because you didn't reference it anywhere.
    1 point
  17. GreenSock test
    Here's a simplified version: The important piece is: var t = this.map._gsTransform; //this is where all the transform data is stored, assuming this.map is the element. var ratio = (oldScale === minScale) ? 1 + newScale / minScale : (newScale - minScale) / (oldScale - minScale); TweenMax.to(this.map, dur, {x:t.x * ratio, y:t.y * ratio, scale:newScale}); Is that what you're looking for? It basically boils down to math
    1 point
  18. G-R-B test
    ROFL....yes that's what I wanted the fullpin to do so I will replicate with the two other pins that do the midfade and fadeout. All I needed was the [0] on the .find function? You did it in 5 seconds no doubt hah. So this finds the first H1 child right? But if its in .content and they all each loop through each ID/class with .content, then why does it not function without selecting the child in array? I guess its not a JS learning forum but would be nice to know. Just started a course on Udemy today. Thanks so much.
    1 point
  19. PointC test
    I'm not 100% sure I understand what you want to happen here. Are you trying to pin the h1 in each content section while that section content scrolls? Like this: Does that help?
    1 point
  20. Shaun Gorneau test
    @hybreeder Which you use where is entirely dependent on where in the URL structure you are. It's a bit difficult to determine which paths you should have where based on your URL structure. For example if your visitor was on http://www.somedomain.com/some/path and clicked on a link with href="terms.php", they would be routed to http://www.somedomain.com/some/path/terms.php a link with href="./terms.php", they would be routed to http://www.somedomain.com/some/path/terms.php a link with href="../terms.php", they would be routed to http://www.somedomain.com/some/terms.php a link with href="/terms.php", they would be routed to http://www.somedomain.com/terms.php So it's difficult to say what you need without knowing your structure. Do the elements with IDs #about, #services, and #contact exist on ALL pages but not terms.php ... or only index.php?
    1 point
  21. PointC test
    If you have duplicate scenes for elements using ScrollMagic, you'd want to use an each() loop and find() the elements in each group that you want to animate. Right now you have an each() loop on your .content.two class, but you only have one of those. You'd probably want to use each() on your .content class and find() the h1, .fader-wrap etc. in each of those divs that you want to animate and create a timeline and scene for each one. Here's a demo from another thread, but it shows the basic mechanics of how to make it work. Hopefully that helps. Happy tweening.
    1 point
  22. PointC test
    We just had a similar question which might give you some ideas. That one has a little target following the path on scroll, but you could easily adapt it to draw the line on scroll. Happy tweening.
    1 point
  23. Carl test
    Yup, functions don't take up any time in your timeline so if you insert them all at the same time, they will all fire at that time. You can use the position parameter to offset the placement of each call() https://greensock.com/position-parameter https://greensock.com/docs/TimelineMax/call() here is a very basic example of a function being called every second var tl = new TimelineLite() tl.call(myFunction, []) tl.call(myFunction, [], this, "+=1") tl.call(myFunction, [], this, "+=1") tl.call(myFunction, [], this, "+=1") tl.call(myFunction, [], this, "+=1") tl.call(myFunction, [], this, "+=1") tl.call(myFunction, [], this, "+=1") function myFunction() { console.log(tl.time()) } view demo with console open
    1 point
  24. GreenSock test
    Oh, sure, ScrollToPlugin works on iOS. However, there are some bugs in iOS Safari (it often misreports scrollTop/scrollLeft values) that can trigger the autoKill feature. You can try setting autoKill:false if you'd like to force the tween to ignore outside changes to scroll position. Like: TweenLite.set($sectionsContainer, {scrollTo: {autoKill:false, y: pageHeight * $currentSection.index() }});
    1 point
  25. GreenSock test
    I didn't quite understand your question - are you saying that the rotation tween is only working once? If so, it looks like you're animating the value to 360 over and over again, right? So the first time it goes from 0 to 360, and then all the rest would go from there (360) to 360, meaning no tweening is necessary. Perhaps you wanted to keep adding 360? So it'd go 360, 720, etc.? If so, then just change rotation:360 to rotation:"+=360". Does that help?
    1 point
  26. benoit test
    OK I found this… sorry for the noise.
    1 point
  27. bruno-vaz test
    I undestand, I applied your example to my project and it worked as expected. Thanks!
    1 point
  28. Acccent test
    I only changed the animation and didn't look at the rest of the code, as there's a lot of it. The problem must be coming from somewhere else! If you could make a more reduced test case that would make it easier for us to help you out
    1 point
  29. Acccent test
    Here's a fork of your pen, I marked the changes in the CSS and JS with "CHANGES HERE". The scale is always animating up, but it should be enough to get you started.
    1 point
  30. GreenSock test
    I don't have much time right now to look into this, but I wanted to mention a couple of ideas: Are you using the latest version of GSAP? It looks like you've got a bunch of attribute transforms on the SVGs, some of which include rotate() which wasn't parsable in old versions of GSAP. Have you tried forcing your timelines to the end and back again to the beginning, just to force the recording of the start/end values? I noticed you're doing a lot of from() tweens (which is fine) but those can sometimes catch people with logic issues because they use the CURRENT values as the destination ones but sometimes people have logic built on rollovers or something else that's very dynamic. So, for example, if the user clicks quickly, and a from() tween is fired in the middle of another tween, the current values are locked in mid-way (not a GSAP problem at all - it's just a logic thing). So, for example, if you create your timelines and then do something like tl.progress(1).progress(0), it forces it to the end (triggering all the tweens to record starting/ending values) and then back again. Worth a shot in your scenario. Let us know if either of those help.
    1 point
  31. Acccent test
    I'm currently building an app with Electron as well, and have run into no issues so far
    1 point
  32. PointC test
    Your each() loop is targeting the class of .container, but you only have one of those so the box animations are firing at the same time. You'd want to target the .img_section class like this: $(".img_section").each(function() { The other problem is your trigger is pretty far down on the page so the element timelines are firing on page load. Here's a super simple example using some plain divs that should help. If you're using ScrollMagic, I'd highly recommend using the addIndicators() plugin to make your debugging easier. Happy tweening.
    1 point
  33. mrpinc test
    I used the GSAP framework extensively in a lot of Desktop Apps mainly using electron. It worked wonderfully. There are very up to date externs for GSAP / Haxe and I can't recommend it enough.
    1 point
  34. GreenSock test
    Oh, that's no problem. You just need to restructure your code a bit. This is a good use case for the "cycle" feature of the staggerTo() method because you can call a function for each target and return the appropriate value: Just make sure that you use a relatively recent version of GSAP (the old one you were using didn't support this feature). Does that help?
    1 point
  35. Jonathan test
    Try the below.. window.onload has always been buggy in IE window.addEventListener("load", function(){ // code goes here }, false);
    1 point
  36. GreenSock test
    Yeah, what you have isn't bad at all, but here's a slightly different approach that some might find a tad more readable: var chestTween = []; var delays = []; for (var i = 0; i < 9; i++) { delays.push(4 + i * .2); } delays = shuffle(delays); $(".chest").each(function(i, e) { TweenMax.from(this, 1, { x: randomRelInt(1, 201), y: randomRelInt(1, 201), ease: Power4.easeOut, delay: delays[i]; }); TweenMax.fromTo(this, 1, { rotation: -360, scale: 0 }, { rotation: random(-6, -1), scale: 1, ease: Power4.easeOut, delay: delays[i] }); chestTween[i] = TweenMax.to(this, 2, { rotation: random(1, 6), ease: Power1.easeInOut, repeat: -1, yoyo: true, delay: 1 + delays[i] }); }); function random(min, max) { return Math.floor(min + Math.random() * (max - min)); } function randomRelInt(min, max) { return ((Math.random() < 0.5) ? "+=" : "-=") + parseInt(random(min, max)); } Happy tweening!
    1 point
  37. Shaun Gorneau test
    I honestly think this is a pretty elegant way of handling things and I don't see anything I would change. Math.floor(Math.random() * 2) is a pretty slick way of getting a random true/false But, why the (5 - 1 + 1) ?
    1 point
  38. Carl test
    Hi and welcome to the GreenSock forums. I don't know anything about Howler but it looks like you've had success tweening properties of your Howler objects. My assumption is that if you can tween sounder's volume like tl.to(sounder, 1, {volume:1}) Then volume is a property of sounder that you should be able to log with console.log(sounder.volume); If you want to constantly log the volume you can use an onUpdate callback on your timeline. Perhaps something like var tl = new TimelineMax( {paused:true, repeat:-1, yoyo:true, onUpdate:logStuff}); function logStuff() { console.log(sounder.volume); } If you take a few minutes to create a CodePen demo (or jsfiddle, plunkr, jsbin, etc) it will make it much easier to understand what you are doing and offer suggestions.
    1 point
  39. GreenSock test
    Ah, if you want throwProps to work (and keep the line connected), you can simply add an onThrowUpdate that's the same as the onDrag: throwProps:true, onThrowUpdate:updateBoxesPath Glad you got things working. Happy dragging!
    1 point
  40. Visual-Q test
    Here's another good solution from Shaun for parallax scrolling. Links tween progress to window scroll position.
    1 point
  41. PointC test
    I'm not 100% sure, but I think you're asking about the parallax effect on scroll? If that's the case, we've had several discussions about it. Check out these threads for more info and ideas. Those are just a few of the discussions. Please use the search feature and look for parallax and you'll find several more threads. Hopefully that helps. Happy tweening.
    1 point
  42. PointC test
    Hi @j.burleigh1 Welcome to the forum. I was gonna suggest the same thing about one timeline and linking the progress() to scroll. Here's a quick fork of your demo with one timeline. Hopefully that helps a bit. Happy tweening and thank you for being a Club GreenSock member.
    1 point
  43. GreenSock test
    Hm, I don't have time to rewrite all the code and troubleshoot at the moment, but I'll offer a few things: There's no need for killAll(), especially in every scroll event. It looks like you're re-creating your entire tween on every single scroll event (extremely inefficient). I'd add some conditional logic that only recreates the tween when absolutely necessary. Is there a particular reason you don't want to just chain all 3 bezier animations together and then adjust the progress value of that one timeline? I didn't quite understand why you felt the need to be juggling between them, killing/recreating so often, etc. Seems cleaner to just create them all once, drop 'em into a TimelineLite and scrub the progress value accordingly. But maybe I'm missing something. If your goal is to drop all the animations from a timeline, you can use timeline.clear() instead of the brute-force, global TweenMax.killAll(). I hope that at least nudges you in the right direction
    1 point
  44. GreenSock test
    I'm a little fuzzy on exactly what you expect here (what does "fix" mean?). By default, smoothOrigin on SVG elements is true, so to accommodate for the shifting that's necessary, GSAP tracks it in an "xOffset" and "yOffset" value in the _gsTransform (purposely undocumented). This is a very unusual edge case where it seems like you're wanting smoothOrigin sometimes, and then you want to omit that other times. Hm. Here's one way you could just offset the x and y values based on the xOffset and yOffset: Is that what you wanted?
    1 point
  45. Shaun Gorneau test
    Hi @sirhc, it's because your restarting the same timelines with values that were calculated at the start. To introduce new values, you can use a function based value for `x` or you can just make these Tweens within the `onclick` handler rather than Timelines. Edit: CodePen fixed
    1 point
  46. OSUblake test
    @djohnson we can't test firebase serve as you have to be logged in for that. I just tried the latest version of GSAP (2.0.1) with Angular 6, and it worked fine... that is until I created a production build. I'm pretty sure that's a problem with the Angular CLI. It's doing weird stuff, like not even executing some code. If you search around, you'll find that there are a lot of issues with the latest version of the Angular CLI. If all else fails, just add your scripts to angular.json file. https://github.com/angular/angular-cli/wiki/stories-global-scripts If Angular is running is slow, it's probably because of how change detection is triggered inside a zone. When an animation is playing, Angular will call ngAfterViewChecked on your components, even if you haven't implemented that method. It does that on every animation frame, which might be happening 60 times/second. That's a lot of extra work! To prevent Angular from doing that, you need to add this line of code in polyfills.ts, right before the zone.js import. // Allow animation frames to run outside zone to improve performance __Zone_disable_requestAnimationFrame = true; /*************************************************************************************************** * Zone JS is required by Angular itself. */ import 'zone.js/dist/zone'; // Included with Angular CLI.
    1 point
  47. Filip Winiarski test
    I have done similar animation some time ago with images. It can be done very simply! 0) You want to render into a canvas 1) Write a method to split a video into different elements (create few video elements with the same video) 2) Position each video element so it creates one whole piece in canvas 3) Create an animation for each element so it actually moves and makes splits visible. <li> elements are only for the texts, all the magic that happens within the video is rendered in the canvas. Very nicely done by the authors, works so smoooothly ( ͡° ͜ʖ ͡ °) PRO TIP: In dev console go to Performance tab, click record, trigger animation, stop record. This way you'll be able to see each frame of the animation to really see what's going on
    1 point
  48. Carl test
    It's am impressive effect for sure. Below is a video that shows that the video is rendered to canvas. Notice that I delete the canvas element and can still interact with the slideshow. https://greensock.d.pr/6i3M1d I didn't realize until now that you could horizontally drag the slideshow.
    1 point
  49. Carl test
    That site uses GSAP (for animation) and Three.js for 3D WebGL rendering. https://threejs.org/ Other than that I really wouldn't even know where to start with that effect. I'd say though that pulling off that effect would require a substantial working knowledge of Three.js. Probably very little GSAP code for doing the actual animation.
    1 point
  50. Carl test
    To have tweens run in parallel you need to insert them at the same point in time in the timeline. Where a tween is inserted into a timeline is controlled via the position parameter. You can read about this parameter in great detail in the TimelineLite.to() docs. The position parameter is used in many other methods like from(), staggerFrom(), staggerTo(), call() and more. In your example, you can have the second tween start at the same time as the first tween by adding it at a time of 0 like this .add(TweenMax.fromTo('#intro', .5, { backgroundPosition: "50% 0vh" }, { backgroundPosition: "50% 20vh" })) .add(TweenMax.to('#intro p.hint', .5, {autoAlpha: 0}), 0) this example shows you how to have two tweens start at a time of 0 AND where a label is placed var tl = new TimelineLite() tl.to("#redBox", 1, {x:550}) //add second tween at time of 0 seconds .to("#blueBox", 1, {rotation:360}, 0) //add a label called "end" at a time of 2 seconds .add("end", 2) // add two tweens at the "end" label .to("#redBox", 3, {scale:2, opacity:0}, "end") .to("#blueBox", 3, {scale:2, rotation:0, opacity:0}, "end") http://codepen.io/GreenSock/pen/youzL?editors=001
    1 point
×
×
  • Create New...