Can someone please help me identify how this is made?

Report · Sep 18, 2018

I'm new in Muse so please bear with me while I ask this. I really like this site: http://berlin.aftermotion.com/berlin/index.html#top

I am trying to recreate it in Muse but I am facing three difficulties which I hope someone could help me solve:

1. The typing CSS text effect on the home page ...is that made inside Muse or do I really need a 3rd party widget to achieve this?

2. The background image that disappears when scrolling to the rest of the site content, is that inserted as a "browser fill" in muse or in some other manner?

3. The triangle shaped cut-outs used throughout the design... I can't figure out how to achieve this....obviously I can't draw them since there is no Pen tool in Muse....?

I really appreciate all the info and help anyone can give!

Report · Sep 18, 2018

This is created by a 3rd party widget – for example one of these: https://www.muse-themes.com/pages/search-results-page?q=text
It is a browser fill.
No, you can’t draw these elements. Muse isn’t a image/graphic editor. So you have to create them externally and place them within Muse.

Report · Sep 18, 2018

Thanks for your answer! I am curious is there a way to add CSS code to animate the text without using widgets?

Report · Sep 18, 2018

CSS is for coders, maybe one of them here has a solution, I serve a muse style version here: https://adobe.ly/2xmUzmt

I choose only three triggers and targets with autoplay inside a composition, you may choose as many as desired, of course. May not be very elegant but costs less than a muse themes membership, if you only need one single eye candy widget.

Kind Regards,

Uwe

Report · Sep 18, 2018

Thanks for the suggestions to both of you Günter Heißenbüttel fotoroeder .

I'm still looking for a more elegant solution for the text animation, like in the example site from my original post. I'm really surprised this can be achieved only by third-party widgets. There must at least be a way to input some CSS code in there somehow (the typewriter effect code is easily accessible with a little Googling and it's free)

I still have two more questions for anyone who has the patience to bear with me here :

Can anybody tell in which manner is the animated arrow underneath the social icons on the homepage animated?
I'm also curious how to achieve for the main navigation menu to appear only when you scroll to the second section (About) (i know about sticky menues and anchoring, but in this example the menu does not appear on the home page, yet it appears when you start scrolling and stays fixed to the top.

Report · Sep 18, 2018

Yes. You can do CSS animation without 3rd party widgets. Although quite honestly, Muse is not the best tool to use if you want to work with code. Dreamweaver, Brackets, Pinegrow, Atom or almost any other code editor will give you more coding satisfaction than Muse can.

That said, custom CSS code goes inside your <head> tag. You'll access it from the Meta Data tab.

<style>

#wrapper {

font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";

background: blue;

color: white;

}

#wrapper h1 { font-size: 5rem; }

@keyframes typing {

from {

width: 100%;

}

to {

width:0;

}

@keyframes typingReverse {

from {

width: 0;

}

to {

width: 100%;

}

@keyframes blink-cursor {

from, to {

border-color: transparent;

}

50% {

border-color: #999;

}

@keyframes cursor-wait {

from, to {

border-color: #999;

}

50% {

border-color: transparent;

}

@keyframes hide-me {

100% {

visibility:hidden;

height:0;

width:0;

}

@keyframes show-me {

from, to {

visibility:visible;

height:auto;

width:auto;

}

.typing-words .word {

position: relative;

overflow: hidden;

display: inline-block;

vertical-align: middle;

visibility: hidden;

width: 0;

height: 0;

}

.typing-words .word:after {

content: attr(text);

color: transparent;

background: blue;

position: absolute;

top: 0;

right: 0;

width: 0;

z-index: 1;

border-left: 3px solid transparent;

}

.typing-words .word:nth-child(1) { animation: 3s show-me 0s; }

.typing-words .word:nth-child(1):after { animation: 1s typing steps(6), typingReverse 1s steps(6) 1s forwards, 0.6s blink-cursor step-end infinite, 0.6s cursor-wait step-end 1 1s; }

.typing-words .word:nth-child(2) { animation: 3s show-me 3s; }

.typing-words .word:nth-child(2):after { animation: 1s typing 3s steps(6), typingReverse 1s steps(6) 4s forwards, 0.6s blink-cursor step-end infinite, 0.6s cursor-wait step-end 1 5s; }

.typing-words .word:nth-child(3) { animation: 2s show-me 6s forwards; }

.typing-words .word:nth-child(3):after { animation: 1s typing 6s steps(6) forwards, 0.6s blink-cursor 6s step-end 6; }

</style>

Embed the following HTML code into your page.

<h1>We Are <span class="typing-words"> <span class="word" text="Line 1">Berlin</span><span class="word" text="Line 2">Design</span><span class="word" text="Line 3">Berlin.</span> </span> </h1>

</div>

Have fun!

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Sep 20, 2018

Thanks for the code? Really?

Kind Regards

Report · Sep 20, 2018

fotoroeder wrote
Thanks for the code? Really?

Like I said, you get better coding satisfaction with a real code editor. And faster loading pages, too .

CSS Animated Typing

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Sep 20, 2018

And again Nancy‘s well known mantra! Nancy, I bet: Within the next 5 to 10 years more than 90 percent of worldwide web site will not be hand coded any more. Every designer will use web design software, which automatically produces code. Ironically, hand coding — and not the principles Muse is following to design web pages — in fact is actually reaching EOL.

Report · Sep 20, 2018

Actually I agree with you. Hand coding is no fun if you can drag & drop your way to bliss. Actually, there are quite a few products available right now that can do that with native HTML, CSS and JS files. Look at Bootstrap Studio.

https://bootstrapstudio.io/

The sad truth is that Muse is not a proper code editor so even a simple CSS animation is prone to fail in anything but a plain vanilla layout. The peripheral code in Muse + Widgets, etc... compounds the problems because the Muse codes often conflict with what people want to do. I can cite a few recent examples from this forum.

Look, I'm not bashing Muse for what it is. But if you're fighting with your tools to get something done, maybe it's time to change tools.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Sep 21, 2018

https://forums.adobe.com/people/G%C3%BCnter+Hei%C3%9Fenb%C3%BCttel wrote
I bet: Within the next 5 to 10 years more than 90 percent of worldwide web site will not be hand coded any more. Every designer will use web design software, which automatically produces code.
Ironically, hand coding — and not the principles Muse is following to design web pages — in fact is actually reaching EOL.

Interesting.

It should be considered also then, that with such easy approaches in existence and the continued proliferation while trending to be used on such a broad spectrum — why then will even designers be needed in 5-10 years? I would be just as worried if not with greater concern, about more and more clients doing their own work with automated based systems guiding them through to completion via their devices and self captured media. More so than being concerned with direct competition with coders.

People that can code are in better position to meet the future, regardless of the trajectory of web builders, concerning the web or otherwise with technology. Each discipline will undoubtably continue to have their place and of course evolution and changes will continue to occur for both.

But to insinuate the EOL of coders is rather laughable in and of itself.

Report · Sep 21, 2018

Exactly the same was said in the second half of the 20th century about new ways of print publishing: At first the „ancient“ type setters and lithographers told us, photosetting has no future, then the photosetters and users of Linosetting repeated this in respect to DTP, and now …

Additionally: I didn‘t say, there is a „EOL of coders“. I said we will see in a near future EOL of self coded homepages — and if you are aware of the update frequency of „good old“ Dreamweaver in comparison to the rise of apps like Wappler, Bootstrap Studio, Webflow …

I personally expect the EOL of Dreamweaver within a not so long time …

Report · Sep 21, 2018

https://forums.adobe.com/people/G%C3%BCnter+Hei%C3%9Fenb%C3%BCttel wrote
Exactly the same was said in the second half of the 20th century about new ways of print publishing:

I would fast forward and liken it more to when everyone got a desktop computer and instantly felt they can be a print designer, then a web designer. Or when everyone got a smart phone and now they are photographers, videographers, etc. In many cases people successfully fulfill those roles on their own now due to technology, software, apps, templates, resource sites, etc. But perhaps mostly due to ambition, effort, a desire to succeed and lots of hustle, to learn and create. Sharing and creation are now apart of everyday society globally, while children are nearly born with a smart device in their hands.

Adobe and many other companies / services see this and are making it increasingly easier for the current customers of designers, etc., to go it alone and bypass professionals, for most anything. This is true across digital and print regardless of the end mediums or products. In todays market companies seem less focused on professionals (few in numbers) and instead are going directly to consumers (mass amounts of sales).

Given that everything continues to go digital and online with more smart connected devices coming online daily, a person whom knows how to code will always find opportunity into the future in many fields. Don’t take my word on it however, a few notable people can be found here discussing the importance of coding moving forward for current and future generations: https://code.org/quotes

https://forums.adobe.com/people/G%C3%BCnter+Hei%C3%9Fenb%C3%BCttel wrote
Additionally: I didn‘t say, there is a „EOL of coders“. I said we will see in a near future EOL of self coded homepages

When I re-read your previous words, you said that "hand coding ...... in fact is actually reaching EOL" ?

Anyway I was just responding in general to the broader picture when I saw your comment, I thought it made for good conversation. 😉

Report · Sep 18, 2018

This was a Muse feature in the beginning, and was cancelled, because of (a) poor SEO quality and (b) even poorer support by browsers – especially in a responsive context. Just read here: https://forums.adobe.com/message/5837411#5837411

Report · Sep 20, 2018

Thank you so much for the code Nancy OShea ! I will definitely try to play with that in Muse. I do have a little coding knowledge but I was attracted to Muse's visual design aspect....the only reason I ask for code is to avoid buying text animation widgets.

I do have one more question if Günter Heißenbüttel or some other expert here would be kind enough to answer: when you start sizing down the browser on the example page from my original post, the V-shaped background graphics is also resizing, not scaling down, but somehow the angle of the "V" is changing (like the image is getting scaled down just from the sides). If we presume the V-shape is an inserted PNG graphic with a transparent "V" cut-out, I can't figure out how is it possible to achieve such shape changes while resizing?

Report · Sep 20, 2018

Lokjutus schrieb
when you start sizing down the browser on the example page from my original post, the V-shaped background graphics is also resizing, not scaling down, but somehow the angle of the "V" is changing (like the image is getting scaled down just from the sides).

Don’t understand exactly, what you mean.

Could you give us (Dropbox or similar) a .muse file containing only the background image, and rephrase, what you want to achieve?

Report · Sep 20, 2018

Please take a look at this site http://berlin.aftermotion.com/berlin/index.html#top

The city image is probably placed as a browser fill...on top of that the rest of the content is designed as a one-page site with sections for each menu item. (No matter how wide the browser window is, the image AND the background on other sections always fills the entire window - that's one more thing that I'm puzzled by, I can achieve this only when I use "browser fill" image). The site sections are designed so that their background is a graphic with a V-shaped cutout. Please see attached images for clarification:

If you take a closer look it's obvious each section is separated with this V-shaped background (for one section it's white, for next it's a bit darker, etc.)

If you take a look at this site in full width on a Desktop computer basically all you see is the city image. As you start scaling down the browser window the V-shaped cutout of the next section starts to appear on top of the city image. As you scale the window more and more, the V-shape is "changing angle" as if the background is somehow scaling down with the browser window. When you scale past the breakpoints, the V-shape still scales in the same manner. If these backgrounds are PNG graphics with transparent V-shape cutout, how is it possible that they always stick to the edges of the browser window and scale down like they do?

I hope I managed to make it clear enough Günter Heißenbüttel ?

fotoroeder

hmmmm, I did not get the chance to try out this code yet...but even if this code does not work, there's numerous other examples out there that one can find.

Report · Sep 20, 2018

It is clear, but a .muse file is needed. Otherwise we have to rebuild your site in all possible variants and look, what goes wrong. This is an endless process, because there may be many reasons for this.

So please, give us a .muse file as I noted in my last post.

Report · Sep 20, 2018

Günter Heißenbüttel you can download my test .muse file here: https://goo.gl/88mv5f

Thanks for bearing with me

Report · Sep 20, 2018

Look at this file (it is your file, just modified): https://www.dropbox.com/s/ll4r90er7pi30ot/TestWebsite-2_Mod.muse?dl=0

It it something like that, you are looking for?

If yes, inspect the .muse file thoroughly and learn to use Muse!

(You are using fluid breakpoints on master, fixed breakpoint on layout page, different page width in layout and master, your image – „test.png“ – scales proportionally and therefore can be set to browser wide, and, and, and …)

Report · Sep 21, 2018

I appreciate your effort Günter Heißenbüttel but your example is still not 100% what I'm trying to achieve

I just started in Muse last week that's why my skills are very limited but I am an Indesign expert user and I also have some web design experience in Joomla and Dreamweaver (although very vague).

The example file I sent you is just something I put there very quickly to try to get the basic layout for the example web site I'm trying to recreate. The file you returned to me is very close to what I'm trying to get, but it still lacks that effect of the triangle graphics getting compacted from the sides (and the changing "V" angle) that is present in the original site when scaling down the browser window from the sides.

However, I appreciate your help very much. I was very interested in learning Muse but I just read that Adobe discontinued its development, which is really bad news! Now I'm not sure is there a point in learning Muse anymore, yet I am still eager to at least try to build this one site and learn things in the process!

Report · Sep 21, 2018

No, there is no way to achieve this within Muse. You’d need unproportionally scaling images to achieve this, and images in Muse always keep their proportions. The other way would be to build the element out of 2 rotated, unproportionally scaling rectangle, but even this won’t work, because the edges of these rectangle inevitably would bleed outside the page/browser width, what causes heavy issues on mobile devices.

One recommendation: If you started Muse „last week“, it makes not really sense, to try to mimic (complicated) sites, because you don’t know neither the basics of web design nor the way, Muse is working. Start with simple sites without any visual gimmicks, and I promise: You will find difficulties enough, which you have to manage due to responsive design. There are many samples and tutorials here

https://helpx.adobe.com/muse/tutorials.html

https://www.youtube.com/results?search_query=dani+beaumont

InDesign knowledge doesn’t really help. Web design is completely(!!) different from print design, because you are designing for a dynamic medium. The paper, you are „filling“ with design, keeps its size and format. The screen, you „fill“ with design may change every second. Every element changes sizes in horizontal, vertical or both dimensions, every element influences every other element: pushes it down, shift is upo, and, and, and …

So: If you want to use Muse (hope you know it is EOL), successfully, start with creating simple sites – just as you certainly have done, when learning InDesign.

Report · Sep 22, 2018

I appreciate the effort of anyone involved in this discussion, particularly Günter Heißenbüttel . Although it is interesting to read all the opinions about the possible future of web design, the conversation kinda evolved away from my original question

It is true that I am very fresh with Muse but I am also a very quick learner. I recognise all the differences in web and print design, but I also embrace all the similarities of Muse and Indesign, which is the reason I felt comfortable using Muse minutes after first opening it. One of the reasons I chose this particular site to recreate is because I know this site, in fact, is built in Muse (therefore it must be possible to 100% recreate it). There are many far more complicated sites out there, and this one really doesn't fit into the realm of "complicated" in my view.

The only thing left puzzling to me is the mysterious behaviour of the V-shaped cutouts. Theymay not be just a placed PNG image because they would not behave the way they do when resizing the browser. But there must be something here that we overlooked.

As things are now, I might just accept this as it is and move on. Again I appreciate all the effort of anyone that helped me in this discussion.

Report · Sep 22, 2018

No, there is nothing what we have „overlooked“. A image only can be scaled proportionally. To change the angle of these cutout, you’d need to scale it unproportionally, what isn’t possible.

You may experiment with pinned image fillings of rectangles, but this results in moving the angle and not changing it. Just try: https://www.dropbox.com/s/gnu17frfbmkat7f/TestWebsite-3_Mod.muse?dl=0

So, if the site is made in Muse I think we are dealing with a widget or custom HTMl, to achieve this.

Report · Sep 22, 2018

Ok, back to your original question ...

Lokjutus wrote
I'm new in Muse so please bear with me while I ask this. I really like this site:
http://berlin.aftermotion.com/berlin/index.html
I am trying to recreate it in Muse

Since the site you like and wish to emulate is a Muse Template, why not just buy the template for the $19 it is being offered for and then modify it as you like, or use it to learn from with the things you wish to replicate and are having trouble with?

Berlin - Portfolio Responsive Muse Template -- $19

https://themeforest.net/item/berlin-portfolio-responsive-muse-template/21587912

https://forums.adobe.com/people/G%C3%BCnter+Hei%C3%9Fenb%C3%BCttel wrote
No, there is no way to achieve this within Muse.

For the angled separators, they are using SVG shapes, etc. Given its offered as a template they obviously added it inside of Muse.

Lokjutus wrote
I just started in Muse last week that's why my skills are very limited

Just Buy The Template and save yourself and others time. The Muse File (template) is available ($19) if you truly want to emulate this site, buy it. Study it, learn from it, modify and extract from it to meet your own design needs. Problem(s) solved.

Adobe Community

Can someone please help me identify how this is made?