Dipscom last won the day on October 27

Dipscom had the most liked content!

Dipscom

Moderators
  • Content count

    969
  • Joined

  • Last visited

  • Days Won

    32

Dipscom last won the day on October 27

Dipscom had the most liked content!

Community Reputation

1,502 Superhero

About Dipscom

  • Rank
    Advanced Member

Profile Information

  • Gender
    Not Telling
  • Location
    London

Recent Profile Visitors

6,299 profile views
  1. Positioning absolute element

    Hey @timdt! I see the a couple of people has mentioned this to you so, I thought I'd repeat it here in a bit more detail. CodePen does a lot of the setup for you and is designed to make coding little snippets super easy. In the HTML tab, you only need to add what goes inside the <body> tag. There's no need for anything else. The CSS and JS tabs, as their names imply, you add the CSS and JavaScript, you can use SASS, Babel and a bunch of other precompilers and/or other useful tools. When you need to add an external library, like, GSAP, click on the settings button on the top right. It will open a modal window. Head to the JavaScript tab in the modal and look at the bottom, there's a dropdown 'Quick-add' button. There you can set a bunch of other options. But you really won't need to change anything you don't want to try. As for your question, I think you are trying to do a bunch of things at once but are a bit lost in the details. You have two SVGs and one wrapper object. Your wrapper object is set to be 1000px wide and high. One of your SVGs is 500px wide and high. It is also absolutely positioned while the other SVG has no set width and height but has a viewBox of "0 0 1366 768". Effectively, the two SVGs are of different sizes. And since you have on absolutely positioned, it will sit on its position relative to the first parent that's doesn't have a 'static' position. In order for you to make sense of what's going wrong here, you need to understand how SVG scales and how elements are positioned with CSS. https://css-tricks.com/scale-svg/ https://developer.mozilla.org/en-US/docs/Web/CSS/position
  2. Show/Reveal part of image slowly SVG

    Soon you will be one to be showing others the ropes.
  3. Show/Reveal part of image slowly SVG

    Yes. But it's really important that you draw all the lines at 0,0 and at the same angle. Then group them. Then, move the group. That way, you're making sure the line itself is at 0,0. The group is whatever translation you used. Then, you scale the line, not the group and it should be fine. However, that is only a simple solution if your graphic is static. If you have a dynamic one, you will want to animate the dash-array and dash-offset properties.
  4. Show/Reveal part of image slowly SVG

    You can calculate and animate the stroke dash array and offset properties - I've got on the back of my memories that someone has shown how to do that somewhere in the forums. But, the quick and easy way is as @Sahil suggests, a single line per section. If you start the lines all at 0,0 and translate a <g> nesting each line, you will be able to scale each line easily without deformation issues.
  5. Moon Launch - 2 SVGs, Launch SVG 1 from SVG 2

    Hi @menschies ! Welcome to the forums! Always remember: With Great Powers, Comes Great Responsibilities. Use them wisely, use them to make things a little bit nicer. A few comments: You can use images instead of inlining the whole SVG if you are not changing the inside of it. The solution to your question is about nesting the separating the elements and nesting them based on your needs. I'm super busy these days but I wouldn't mind lending a hand whenever possible for your landing page - within limits. I can't take any responsibility at the moment.
  6. Rolling number effect

    Hi @RockyW, It's very hard to troubleshoot issues "in the dark", without the code in context. Could you set up a simple example of what you are trying to achieve? There are several ways of triggering a function every X seconds. Some with plain JavaScript, some with GSAP but it will depend on what you are trying to achieve really. Using the code you provided, one way to go about it would be: function waitCall() { TweenMax.delayedCall(1, IncreaseValue) } function IncreaseValue() { //some process here to pass value to poolValue_mc.text; TweenMax.to(poolValue_mc, 3,{ y:1000, ease:Elastic.easeInOut.config(0, 10), onComplete:waitCall }); } Note that your tween is not set to reset itself so, you won't see anything move after the first time it plays. Even if you were to reset it, you will end up with a flickering animation jumping around. What you really want to do is to create a carousel of numbers and rotate them at your specific rate, rather than just this one value.
  7. Hello @Yashi I've spent some time on this issue - still a crude implementation at the moment but it should be enough for educational purposes. I'm going to have a really busy week so, I might not have much time to polish this but I might come back later to make this smoother and add some extra visual sugar. I know see the reason you were using pointer-events. It could be used in this situation to control who's responding to the mouse and who shouldn't but I think it ends up adding unnecessary complexity. A simple solution to get around your clicking of buttons is to simply add a tiny bit of customised z-index. Here's MDN's documentation on the z-index property. Be sure to read it and the relevant links in it if you are not familiar with it. See if the bellow helps you:
  8. Smooth Page Scroll

    Zero pressure from the crowd, @OSUblake...
  9. I wouldn't call it a simple and normal cursor... Anyway, I do find this an interesting challenge and although I can't sink my teeth into it right now, I'll make a more detailed example for you at some point over the weekend. Will that be ok?
  10. Threejs and TweenMax looping properties

    Allow me to have a stab at it: There are a few things to consider: 1) You might not want to be generating a new geometry at each tick. Better to have them all generated to begin with and then just animate their properties if you have a set, limited number of them. 2) You will need to create a material for each of the individual meshes that you want animated separately. Because if you are linking all meshes to a single material, when you change any of that material's property, you will affect all linked meshes. Do forgive if I missed some detail but I'm short on time today. Hope this is helpful.
  11. Hey @Yashi, Why do you need to set pointer events to none? I don't understand. If what you are trying to do is to be able to click on something else as well as drag your point then you need to be able to differentiate between what you are doing (click, mouse down, mouse up) and who you are clicking, if it is your document or a button (and then, which button). I'll try to get an example going at some point but let me know if you work something out yourself. A cheap way to solve your issue, is to put the pointer-events back to auto as soon as you click. But that isn't really what you should be doing (setting pointer events to none). doc.on("mousedown touchstart", trail, function(e) { trail.css("pointer-events", "none"); if (e.which == 1) { ... } ... } As for your second question. Current state of what? And What state is it that you are trying to store?
  12. Performance issues with storyboard animation

    You'll be using the .pause(), .play() or .resume() methods depending on the situation. You should see a significant improvement if you only have the visible elements animating. And it is perfectly feasible to achieve that with ScrollMagic, there are several discussions here on the forums on different ways of playing and pausing tweens with it.
  13. Performance issues with storyboard animation

    Yes, it will. You said yourself you are using functions to create the original tweens. It would be a matter of calling those functions again when you hit the desired triggers. Having said that, depending on the complexity of your animations, it's not great to be recreating them all the time. In your situation, I would simply create references to the tween/timelines from the functions and pause/unpause whenever the need arises. Have a look at this brand spanking new post and videos if you need some guidance on how to structure complex animation. https://css-tricks.com/writing-smarter-animation-code/
  14. Tween not completing?

    Hi @jesper.landberg, Could you set up a reduced case example? I am guessing you are using Vue.js but regardless it will be pretty hard to help without seeing what's going wrong.
  15. Performance issues with storyboard animation

    Hey there! If you keep track of your elements, you can kill all of their tweens once they reach a particular point of your choosing with .killTweensOf() method.