About a very amazing web effect (so sorry that I don't know how to descript it)

Hey all,
I’ve used Hype for several months, now I’m working on a complex project with a partner. He’s a programmer and I’m a designer.
We want to use Hype to finish an amazing web effect, just like this:example
What I want to learn is below:

  1. How do I make the white lines appear like the web above? What I mean is from top to the bottom or left to right…according to some orbit…
  2. is this web a whole big scene or many scenes? I always had troubles in transition from one page to another, I want to know how to do the transition like the web above.

    And also, we want to know if hype can do this without code/JS ?

I’m really really need help and want to learn about this effect for a long time, Thanks all~~~

Hi Lydia @lydialmz

The above website you have linked to uses a lot of javascript to get the required experience.
Tweenlite and Tweenmax from GreenSock. Also scrollerJS and others.

The animation (or something similar) can be achieved in Hype. It would take a lot of planning and foresight to achieve the same results. But it’s not impossible.

Here is a brief example:

template file attached: brightmedia.zip (25.3 KB)

I have created the line effect by animating a rectangle (left to right) and then placing that in it’s own group which allows me to rotate the animation without it changing.

2 Likes

@DBear nice and simple!

@lydialmz
you can build a similar thing with hype

  • Vivus animation for all extrusions (not only single lines) ( or the @DBear method)

  • Viewport + custom behavior for vertical effects with scroll

  • Javascript +CSS of the anchor point.

  • CSS with media query for the background grid + javascript for the interactive translational

  • PNG and / or SVG images

Hi DBear,
Thanks very much!! You help me a lot ! Now I have some idea about it~I’ll try it~
And also I want to know, if the transition from part 1 to part 2(or part 2 to part3 and so on) uses javascript? I’m a designer and very poor of coding. I have read the GreenSock and find lots of amazing animation effect but I don’t know how to do it now. What a pity!~~
Thank u very very much ~! I’ll try it now~

Hi michelangelo,
Thanks for your idea very much~ I’ve not known the HypeDocks until you mentioned it!
Thank u! I’ll try to do it today~U give us the way to do it~!