Popular Content

Showing content with the highest reputation since 02/24/2019 in all areas

  1. 5 points
    Your code at line 307 is incorrect .fromTo('.featImg', 1, {x: "-80%", ease: Power4.easeOut}, "-=1.9") You are using a fromTo but you need from AND to values, something like: .fromTo('.featImg', 1, {x:"-20%"}, {x: "-80%", ease: Power4.easeOut}, "-=1.9") Looking through your code it appears you are defining an ease in both the from and to vars. You only need it once, in the to vars. Also there are some awkward position parameters .to( ".slide" , 1 ,{ width: '100%', height: '100vh', padding: '40px', ease: myEase }, "-+1"); // should be "+=1" or "-=1" In the future, please provide a reduced test case. It will make things much easier for us and you to isolate the problems. thanks
  2. 5 points
    If you don't need the slidecontainer wrapper you can get rid of it and scroll the window instead. Then you could use jquery to get the offset position of the slides and scroll the window to that. UPDATE: DOH I see I didn't read the original question entirely this only gets you part way solving for scrolling different sized sections, to scroll normally to the bottom of an oversized item you would also have to do as Craig said and test the position of the current slide against the window: This might help: https://stackoverflow.com/questions/4653911/jquery-detecting-if-the-bottom-of-the-div-is-touching-the-bottom-of-the-browse and then you need to attach the logic to the mousewheel event listener to prevent the goto slide functions from firing until it hits the bottom of an item. You'd probably also want to test it in reverse to be able to scroll up normally as well in these instances. Another easier way might be to look at using scrollMagic and triggers to fire the scrolls as opposed to the current event listeners.
  3. 5 points
    Ha! It happens to all of us. @GreenSock is cranking out updates too fast for any of us to keep up with him. Here's hidden camera footage of how fast he works.
  4. 5 points
    I'm certainly not a coding expert, but it looks good to me. My own philosophy of coding is: Does everything work as expected? Is the code as DRY as possible (or close to it)? Did I use meaningful function and variable names? Did I write myself enough comments that I can easily update this in 6 months? If I can meet those criteria for my own code, I call it a good day. Just my two cents worth.
  5. 5 points
    Yeah, I agree with Shaun, CustomWiggle would probably be the easiest approach:
  6. 4 points
    Hi, Well, there are a few ways to tackle this. The ideal react-way should be to keep track of the current card's index position in the array and check that value in order to update the component's state with the card's value, and if the updated state is bigger than 10, run the animation. Unfortunately your code is not structured like that and honestly I don't see the need to refactor everything if the only side effect of an animation update is trigger another animation and not data or DOM updates. With that in mind the solution is to mess around with scope and this, which until this day and after working in JS for so long it can come up as an obscure and difficult topic. Lucky for us GSAP does helps a lot in terms of binding and managing scope. First in the render method add an extra attribute to the DOM element created in the JSX: <li className="dataCard" key={id} ref={e => (this.listItem[id] = e)} data-value={listItem.value}> <p>ID: <span>{listItem.id}</span></p> <p>Value: <span>{listItem.value}</span></p> </li> As you can see I'm passing the data-value attribute which is the value you want to check. Then in the GSAP part of your code you have to use an onComplete callback inside the configuration of the stagger method, not using the onCompleteAll callback: animateDataCards(){ this.tl = new TimelineLite({repeat: -1 }); const duration = 1; const next = 2; this.tl .staggerFromTo(this.listItem, duration, {autoAlpha: 0, y:500},{autoAlpha: 1, y:275}, next) .staggerFromTo(this.listItem, duration, {y:275}, {y:125}, next, 2.5) .staggerFromTo(this.listItem, duration, {y:125}, { y:10, onComplete: this.burgerFlip, onCompleteParams: ["{self}"] }, next, 2.5) .staggerFromTo(this.listItem, 1, {y:10},{ autoAlpha: 0, y: -250, ease: Power3.easeInOut },5, this.onCompleteAll) } Now the key here are two GSAP specific concepts. The first concept is the fact that any stagger method returns an array of GSAP instances, so each loop in the array passed to the stagger method, generates a specific TweenLite method in this case. Because of that we can attach a callback on each of those. The second, and I'm sure you already saw it, is the "{self}" string passed as the parameter for that specific callback. That tells GSAP to pass the instance as the first parameter in the callback. Then in the burger flip callback you can run this code: burgerFlip(instance){ const dataValue = instance.target.getAttribute("data-value"); if ( dataValue > 10 ){ TweenLite.fromTo(".burger", 3, {x: -250, autoAlpha:0, rotation: 0}, {autoAlpha:1, rotation:720, x:250}) } else { console.log("sorry no burger"); } } Here is the kicker, each GSAP instance has a target property, which is a reference of the DOM node being animated, hence instance.target in the code. Since we attached a data-value attribute to the element, we can now check that value and run our conditional logic and see if the burger will animate or not: https://stackblitz.com/edit/react-gsap-burger-conditional Happy Tweening!!
  7. 4 points
    Just to explain why you were seeing that behavior with MorphSVGPlugin... The main issue is that your starting and ending shapes have different numbers of points - your "liquified" (end) shape had an extra point added to the left side of those letters. MorphSVGPlugin must place a point somewhere and it's really not feasible for it to guess perfectly - it places extra points evenly across all the segments. The best way to make this look the way you want is to actually add the points yourself to your starting shape where they visually make sense. I forked your codepen and dropped an extra point into the middle of the left side of each of those characters: You could do that in Illustrator, or I've got an unreleased tool called PathEditor that lets you edit paths in the browser (and add points by ALT-clicking). That's what I used, and then just copy/pasted the resulting "d" data from the SVG in Dev Tools. Does that help?
  8. 4 points
    Hi Sejabs, Welcome to the forums! We always ask people to provide a reduced case example to make it easier to help. In your example what I think you are trying to achieve is quite straight foward but I am not sure I understood your situation correctly. So, if you could show us what is it that you are trying to achieve, would be of immense help. For example, I have no idea what Chokidar is. Nor I understand why you need to watch a folder and add an image path to an array if you are already watching said folder. In regards to the GSAP specific bits, you are correct when you say the timeline expects all of its components to be present in order to do its job correctly. One of the reasons being it has to calculate the element's attributes before to tweening them. However, there are ways around it. One such way would be to have a timeline do whatever animation it is that you want, pause at your desired point, call a function that would animate the new image from the array, including removing the element from said array at the end of it and then, at the end of this other animation, the timeline would be told to continue playing. To me, it would be totally feasible. If I understand what you want correctly.
  9. 4 points
    You just need to use the latest version of GSAP 2.1.2. Happy staggering.
  10. 4 points
    I assume you're talking about the wheel event, right? Yes, you could do that. You'd have to add some logic to check the height of the current active section and only fire the scrollTo the next section if the bottom of the active section is above or equal to the bottom of the window. Hopefully that makes sense. Happy tweening.
  11. 4 points
    You can drop an image into a SVG and use the DrawSVG plugin to reveal it. I'd probably try to use a series of strokes with varying widths and opacity to reveal it. Or you could move to a canvas based solution and use particles to generate the smoke. Happy tweening.
  12. 4 points
    I need to update those demos to some fresher/better ones:P Between the other code in those demos the actual logic for the effect is pretty straight forward. You just lerp the scroll value, check the diff between the new and old value... and apply that value to anything.. like a skew in this case. Something like the below (not tested). let scrollTarget = 0 let scrollCurrent = 0 let ease = 0.1 const skewTarget = someElement window.addEventListener('scroll', () => { scrollTarget = window.scrollY }) function render() { scrollCurrent += (scrollTarget - scrollCurrent) * ease const diff = scrollTarget - scrollCurrent const vel =+ diff skewTarget.style.transform = `skewY(${vel}deg)` requestAnimationFrame(render) } requestAnimationFrame(render)
  13. 4 points
    Thanks for the link. Very helpful. The issue is not at all related to the fact that you are loading TimelineLite on a page. The problem has to do with the fact that you are animating 4734 lines in an SVG and DrawSVG has to measure every single line and manipulate its stroke-dashoffset. I suspect the added time has more to do with the browser's reading and writing of values and not so much DrawSVG's computational time. Regardless, I would suggest you try a test with a much simpler svg just to make sure this is exactly where the problem is.
  14. 4 points
    We must be both working on a very similar site judging from your last post & now this one haha. Anyway, It's a complex topic often using barba.js & other libraries to do AJAX transitions for fluidity. I'm working on a project tiles to project page transition for a personal project using barba & gsap. I'm happy to inbox you that when I'm done & see what you can extract from it. That being said... I've learned a lot from the following sources: To start you off getBoundingClientRect is your friend & helps if you want to do something like this (half page transition). This next example is probably what you need (not using gsap though). You can easily convert over & use timelines etc with it. Here is one using Vue & GSAP together Here is React & GSAP And finally, this one is mostly css but I've included it anyway incase you want to learn from it. Hope that all helps!
  15. 4 points
    @jesper.landberg has been doing this exact thing. The first version is almost exactly the effect in on that site, but I've attached a slider version done made by him as well.
  16. 4 points
    It's not exactly the same question, but Sahil has some neat demos for an answer in this thread: Happy tweening.
  17. 4 points
    Indeed this is happening since the latest VSCode update and is more likely a VSCode thing and how intellisense (not too intelligent it seems? ) is working. One solution could be to define global variables in your workspace or change the settings. Much like you I've seen this behaviour when working with VSCode, lucky me, in the project I'm working right now I'm using webstorm, so I don't have to deal with this for the next weeks , but still you could start an issue in VSCode repo or look in stack overflow.
  18. 4 points
    Maybe something like this: Happy tweening.
  19. 4 points
    Thanks for the super clear demo. Yes, there is a significant difference between how staggerTo() works on TweenMax and how it works on a Timeline (which probably isn't obvious to most users). From the docs: TweenMax https://greensock.com/docs/TweenMax/static.staggerTo() staggerTo() simply loops through the targets array and creates a to() tween for each object and then returns an array containing all of the resulting tweens (one for each object). TimelineLite / Max https://greensock.com/docs/TimelineMax/staggerTo() staggerTo() simply loops through the targets array and creates a to() tween for each and then inserts it at the appropriate place on a new TimelineLite instance whose onComplete corresponds to the onCompleteAll (if you define one) and then appends that TimelineLite to the timeline (as a nested child). So to further dig into your mystery its important to know what this is inside your function. If you console.log(this) for the TweenMax you will get the last tween, which means this.target is the target of the last tween. If you console.log(this) for the Timeline you will get a timeline (which is the new TimelineLite mentioned above). Timeline's don't have a target, which is why you are seeing undefined. Hopefully this helps you better understand what is happening. Again, its not something most people will pick up on in the first few weeks or even months of using GSAP. If you want to get the last target in a TimelineMax.staggerTo() you can use: new TimelineMax().staggerTo(".square",1,{y:30},0.1,0,function(){ console.log("With TimelineMax"); console.log(this.getChildren()[this.getChildren().length-1].target); });
  20. 4 points
    Hi @MathieuDaix, A quick solution would be to assign a `linesClass` in the splitText() vars, then use that class as a hook for jQuery to wrap() those lines with another div. Here is a CodePen showing that. There is also a non-jQuery option at the bottom of the script. You can see below, each <div class="myLines"> (assigned with splitText ) is wrapped in a <div class="myLinesWrapper"> ( done with jQuery ). Hope this helps!
  21. 4 points
    Google Web Designer does have it's own timeline just like Adobe Flash / Animate. You can technically create animations using the GWD / Flash timeline and GSAP at the same time, but you might cause some conflicts like Shaun said. With these graphical tools I find it best to use them for layout only and use GSAP for animation only. Here's an old post from the forums that should help you insert GSAP into GWD. The exact steps might have changed since GWD is constantly evolving.
  22. 4 points
    Yes, I see what you mean @W2P Digital and that's tricky because the way SplitText determines if something is on a different line is if its y-position is different. In your case, of course, the bounding box of the bigger text is indeed different than the smaller text next to it. If we shifted to look at the x-position instead, that has its own challenges as well (like indentation would throw things off). See what I mean? If you've got any ideas, I'm all ears. This may be one scenario when you're better off manually wrapping things to specify your intent. I wish I had a great [automated] solution for ya.
  23. 4 points
    Sorry, but I don't understand what you are asking. Thanks for the demo, but I don't understand what to do with it. What is rechteck3a? Am I supposed to look in the SVG code and try to decipher the rgb value? fill="rgba(250,250,50,0.70) Perhaps you can try to explain 1 simple interaction, the result it gives and the desired result you would like. I'm guessing your issue has more to do with how SVGs handle transform origin and nested elements and not necessarily something related to gsap. I think that GSAP's smoothOrigin may help you. Please read section challenge: set transformOrigin without unsightly jumps at: https://greensock.com/svg-tips
  24. 4 points
    Hi @Gianluca Giurlando and welcome to the GreeenSock Forum! Yes that is still valid. On the frontend of your website, check the browser dev tools Network panel and make sure your GSAP CDN script is being run/loaded before your custom GSAP script JS file. This way your custom code runs after GSAP is already loaded Also you might have to add a DOM ready event and window load event to make sure your code is running when the HTML markup (DOM) and window is fully loaded. // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { console.log("DOM loaded"); // wait until images, links, fonts, stylesheets, and js is loaded window.addEventListener("load", function(e) { // custom GSAP code goes here console.log("window loaded"); }, false); }); Check your dev tools console to make sure you see those output console logs. <?php // The proper way to enqueue GSAP script // wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); function theme_gsap_script() { wp_enqueue_script( 'gsap-js', 'http://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js', array(), false, true ); wp_enqueue_script( 'gsap-js', get_template_directory_uri() . '/wp-content/js/custom-gsap-scripts.js', array(), false, true ); } add_action( 'wp_enqueue_scripts', 'theme_gsap_script' ); ?> The link to the WordPress Codex for enqueuing JS files: http://codex.wordpress.org/Function_Reference/wp_enqueue_script For easy reference: Happy Tweening!
  25. 4 points
    Oh, I think the problem is actually that you have Dev Tools open! That puts a LOT more strain on the browser because it has to track and report a bunch of stuff, like all the CSS styles that get updated on every tick have to show up inside Dev Tools and get highlighted, etc. Try closing Dev Tools If you do a performance snap shot in Dev Tools (see attached), you'll see that the vast majority of the work is the rendering, not the execution of JavaScript. In other words, it has little to do with GSAP or CSS animations - it's browser rendering. You've got a lot of pixels that must update on every tick. I'm not sure there's a magic bullet here outside of rebuilding in <canvas> or something. Oh, and no, it can't be a server issue because that would only affect load time. All the animation stuff happens client-side. You might also want to open the "layers" area of Dev Tools and look at what you've got going on there - it's a LOT. And very big layers that need repainting/compositing. Even if you just refactored the scrolling background graphics to be in <canvas>, that might help a lot. I wish I had a great answer for you, but I think you'll notice things perform better when Dev Tools is closed
  • Newsletter

    Want to keep up to date with all our latest news and information?

    Sign Up